如何为数据表搜索栏创建特定的html结构？

我正在尝试将此结构添加到搜索栏：

 
 
   
 Search 
 
 
  

实际上我试图将此代码添加到我的数据表中：

 $("#example-datatable").DataTable({ keys: !0, "dom": 'lrtip', 

但是你可以从这个JSFIDDLE看到结果是完全错误的。

最终结果应该是这样的：

我做错了什么？

Answer 1

我无法解释代码中的错误，但我可以为此分享我的解决方案。 我希望它会带你到正确的解决方案。

通过将其添加到表对象，您可以在输入之前删除“搜索：”：

 let table = $('#example').DataTable( { language: { search: "" } }); 

您可以运行此函数以更改输入的占位符：

 $('.dataTables_filter input').attr("placeholder", "SEARCH"); 

您还可以使用此函数替换所有输入元素：

 $('.dataTables_filter label').html(''); 

https://jsfiddle.net/0da982ue/9/