删除默认搜索框并在 jquery 数据表中添加自定义搜索框
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/29769968/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
remove default search box and add custom one in jquery datatable
提问by Carlos
I am using jquery datatable. My required is to remove default search box and add custom one in difference place. I use bFilter:falsefor remove the search input but it is also disabling search filter functionality. Any Idea how to fix it without using css fiddle
我正在使用 jquery 数据表。我的要求是删除默认搜索框并在不同位置添加自定义搜索框。我bFilter:false用于删除搜索输入，但它也禁用了搜索过滤器功能。任何想法如何在不使用 css fiddle 的情况下修复它
$(document).ready(function(){
var table= $('#example').DataTable({
paging:false,
bFilter:false,
ordering:false
});
$('#search-inp').keyup(function(){
table.search($(this).val()).draw() ;
})
});
回答by Omer Butt
For Hiding Default Search Input box of Data tables AS:
by default sDom="lftipr";
用于隐藏数据表 AS 的默认搜索输入框：
默认情况下sDom="lftipr";
Perform these operations on datatables
'l' - Length changing
'f' - Filtering input
't' - The table!
'i' - Information
'p' - Pagination
'r' - pRocessing
For removing default search box just remove the f character from sDom.
对数据表执行这些操作
'l' - 长度改变
'f' - 过滤输入
't' - 表！
'i' - 信息
'p' - 分页
'r' - pRocessing
要删除默认搜索框，只需从 sDom 中删除 f 字符。
like:
像：
$('#table').DataTable({
"sDom":"ltipr"
});
Hope this must work
希望这必须工作
回答by ithinkisam
You can use the domoption to hide the search input without disabling the search functionality. This is useful if you want to provide your own inputs for searching (perhaps on a column by column basis, or globally). It also accomplishes what you asked for initially - remove the original search input without using CSS.
您可以使用该dom选项隐藏搜索输入而不禁用搜索功能。如果您想提供自己的搜索输入（可能逐列或全局），这将非常有用。它还完成了您最初的要求 - 在不使用 CSS 的情况下删除原始搜索输入。
Here is the documentation: https://datatables.net/examples/basic_init/dom.html
这是文档：https: //datatables.net/examples/basic_init/dom.html
And, of course, an example:
当然，还有一个例子：
var table = $('#example').DataTable({
paging: false,
bFilter: false,
ordering: false,
searching: true,
dom: 't' // This shows just the table
});
You could also use this method to render the search input in a different place. Depending on where you need to render the input, you may be able to avoid using a custom one altogether.
您还可以使用此方法在不同的位置呈现搜索输入。根据您需要呈现输入的位置，您可以完全避免使用自定义输入。
回答by Guruprasad Rao
bFilteractually removes the search functionality so what I suggest it just hide the default search and then you can implement your custom search with the code you have already written. Just check below code:
bFilter实际上删除了搜索功能，所以我建议它只是隐藏默认搜索，然后您可以使用您已经编写的代码实现自定义搜索。只需检查以下代码：
#example_filter //#example is your table id, so you can replace it with whatever Id you give to table
{
display:none;
}
Note :Remove bFilterduring initialization
注意：bFilter在初始化期间删除
Then your normal coding. Here is the DEMO
然后你的正常编码。这是演示
回答by Saji Xavier
As Guruprasad mentioned, 'bfilter': false removes the search functionality. So you need to use the 'dom' option.
正如 Guruprasad 提到的， 'bfilter': false 删除了搜索功能。所以你需要使用'dom'选项。
Also dom comes with markup and styling functionalities. So if you need the exact datatable styling then you should use
dom 还带有标记和样式功能。因此，如果您需要确切的数据表样式，那么您应该使用
$('#example').dataTable( {dom: '<"row"lr><"row"<"col-xs-12"t>><"row"<"col-sm-6"i><"col-sm-6"p>>'});
$('#example').dataTable( {dom: '<"row"lr><"row"<"col-xs-12"t>><"row"<"col-sm-6"i>< "col-sm-6"p>>'});
