javascript jQuery DataTables：隐藏搜索栏
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/53885245/
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
jQuery DataTables: hide search bar
提问by user10805743
I seem not able to hide DataTables default search bar. So far, I have tried solution from thisthread, but setting bFilter:falsedisables filtering entirely, so my search boxes in the footer simply do not work any longer.
我似乎无法隐藏 DataTables 默认搜索栏。到目前为止，我已经尝试过这个线程的解决方案，但是设置bFilter:false完全禁用了过滤，所以我在页脚中的搜索框不再工作了。
I have put up jsfiddle
我已经放了jsfiddle
My HTML:
我的 HTML：
<thead>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.css">
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.js"></script>
</thead>
<tbody>
<table id="mytable">
<thead>
<tr>
<th>name</th>
<th>type</th>
<th>color</th>
</tr>
</thead>
<tfoot>
<tr>
<th></th>
<th></th>
<th></th>
</tr>
</tfoot>
<tbody>
<tr>
<td>apple</td>
<td>fruit</td>
<td>red</td>
</tr>
<tr>
<td>banana</td>
<td>fruit</td>
<td>yellow</td>
</tr>
<tr>
<td>carrot</td>
<td>vegie</td>
<td>red</td>
</tr>
<tr>
<td>potato</td>
<td>vegie</td>
<td>brown</td>
</tr>
</tbody>
</table>
</tbody>
and jQuery code:
和 jQuery 代码：
$(document).ready(function(){
let table = $('#mytable').DataTable();
$('#mytable tfoot th').each( function (i) {
let title = $('#mytable thead th').eq( $(this).index() ).text();
$(this).html( '<input type="text" placeholder="Search '+title+'" data-index="'+i+'" />' );
} );
$( table.table().container() ).on( 'keyup', 'tfoot input', function () {
table
.column( $(this).data('index') )
.search( this.value )
.draw();
} );
});
Any help is much appreciated.
任何帮助深表感谢。
回答by
You need to adjust sDom attribute of your DataTable accordingly:
let table = $('#mytable').DataTable({sDom: 'lrtip'});That's supposed to hide search box without disabling filtering feature.
Also, you might want to check out official referencedoc regarding the subject.
您需要相应地调整 DataTable 的 sDom 属性：
let table = $('#mytable').DataTable({sDom: 'lrtip'});这应该隐藏搜索框而不禁用过滤功能。此外，您可能想查看有关该主题的官方参考文档。
回答by Alok Singh
Data table provides customization options to show and hide elements and also custom elements. We can use domvalues to customize:
数据表提供自定义选项来显示和隐藏元素以及自定义元素。我们可以使用dom值来自定义：
l - length changing input control
**f - filtering input**
t - The table
i - Table information summary
p - pagination control
r - processing display element
**f is for filter , so we can remove it.**
$('#example').dataTable( {
"dom": 'lrtip'
} );
回答by Tushar Walzade
Simply add this class in your css - .dataTables_filter, .dataTables_info { display: none; }
只需在您的 css 中添加此类 - .dataTables_filter, .dataTables_info { display: none; }
The live instance -
实时实例 -
$(document).ready(function () {
let table = $('#mytable').DataTable();
$('#mytable tfoot th').each(function (i) {
let title = $('#mytable thead th').eq($(this).index()).text();
$(this).html('<input type="text" placeholder="Search ' + title + '" data-index="' + i + '" />');
});
$(table.table().container()).on('keyup', 'tfoot input', function () {
table.column($(this).data('index'))
.search(this.value)
.draw();
});
});.dataTables_filter, .dataTables_info { display: none; }<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.css">
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.js"></script>
<tbody>
<table id="mytable">
<thead>
<tr>
<th>name</th>
<th>type</th>
<th>color</th>
</tr>
</thead>
<tfoot>
<tr>
<th></th>
<th></th>
<th></th>
</tr>
</tfoot>
<tbody>
<tr>
<td>apple</td>
<td>fruit</td>
<td>red</td>
</tr>
<tr>
<td>banana</td>
<td>fruit</td>
<td>yellow</td>
</tr>
<tr>
<td>carrot</td>
<td>vegie</td>
<td>red</td>
</tr>
<tr>
<td>potato</td>
<td>vegie</td>
<td>brown</td>
</tr>
</tbody>
</table>
</tbody>