如何删除jQuery DataTables插件添加的search栏和页脚？

我正在使用jQuery数据表 。

我想删除默认情况下添加到表中的search栏和页脚（显示有多less行可见）。 我只是想使用这个插件进行sorting，基本上。 可以这样做吗？

Answer 1

对于数据表> = 1.10 ，请使用：

$('table').dataTable({searching: false, paging: false}); 

对于DataTables <1.10 ，请使用：

 $('table').dataTable({bFilter: false, bInfo: false}); 

或使用纯CSS：

 .dataTables_filter, .dataTables_info { display: none; } 

Answer 2

查看http://www.datatables.net/examples/basic_init/filter_only.html获取要显示/隐藏的function列表。;

你想要的是将“bFilter”和“bInfo”设置为false;

 $(document).ready(function() { $('#example').dataTable( { "bPaginate": false, "bFilter": false, "bInfo": false } ); } ); 

Answer 3

您也可以通过设置sDom来完全不绘制页眉或页脚： http : sDom

 'sDom': 't' 

将显示只是表，没有页眉或页脚或任何东西。

这里讨论一些： http : //www.datatables.net/forums/discussion/2722/how-to-hide-empty-header-and-footer/p1

Answer 4

如果您正在使用自定义filter，您可能希望隐藏search框，但仍希望启用filterfunction，所以bFilter: false不是这样。 使用dom: 'lrtp'来代替，默认是'lfrtip' 。 文档： https ： //datatables.net/reference/option/dom

Answer 5

一个快速和肮脏的方法是找出页脚的类，并使用jQuery或CSS隐藏它：

 $(".dataTables_info").hide(); 

Answer 6

 <script> $(document).ready(function() { $('#nametable').DataTable({ "bPaginate": false, "bFilter": false, "bInfo": false }); }); </script> 

在你的数据表的构造函数

https://datatables.net/forums/discussion/20006/how-to-remove-cross-icon-in-search-box

Answer 7

如果你正在使用美乐器：

 .dataTables_wrapper .fg-toolbar { display: none; } 

Answer 8

在这里，你可以添加到你的代码sDom元素，顶部的search栏是隐藏的。

 $(document).ready(function() { $('#example').dataTable( { "sDom": '<"top">rt<"bottom"flp><"clear">' } ); } ); 

Answer 9

这可以通过简单地改变configuration来完成：

 $('table').dataTable({ paging: false, info: false }); 

但要隐藏空的页脚; 这段代码的诀窍是：

  $('table').dataTable({ paging: false, info: false, //add these config to remove empty header "bJQueryUI": true, "sDom": 'lfrtip' }); 

Answer 10

 var table = $("#datatable").DataTable({ "paging": false, "ordering": false, "searching": false }); 

Answer 11

你可以使用sDom属性。 代码看起来像这样。

 $(document).ready(function() { $('#example').dataTable( { 'sDom': '"top"i' } ); } ); 

隐藏search和寻呼机框。

Answer 12

正如@Scott Stafford所说的，sDOM是显示，隐藏或重新定位组成DataTable的元素的最有帮助的属性。 我认为sDOM现在已经过时了，现在这个属性现在已经是dom 。

这个属性允许设置一些类或ID到一个元素，所以你可以更容易时尚。

请查看官方文档： https ：//datatables.net/reference/option/dom

这个例子只显示表格：

 $('#myTable').DataTable({ "dom": 't' }); 

Answer 13

你可以通过CSS隐藏它们：

 #example_info, #example_filter{display: none} 

Answer 14

我已经完成了这一步，通过分配页脚一个ID，然后使用CSS的样式：

  <table border="1" class="dataTable" id="dataTable_${dtoItem.key}" > <thead> <tr> <th></th> </tr> </thead> <tfoot> <tr> <th id="FooterHidden"></th> </tr> </tfoot> <tbody> <tr> <td class="copyableField"></td> </tr> </tbody> </table> 

然后使用CSS的样式：

 #FooterHidden{ display: none; } 

如上所述的方式不适合我。

Answer 15

我认为最简单的方法是：

 <th data-searchable="false">Column</th> 

您只能编辑您必须修改的表格，而无需更改常见的CSS或JS。

Answer 16

只是提醒你不能在同一个<table>元素上初始化DataTable两次。

如果您遇到同样的问题，那么您可以设置searching和paging错误，同时初始化您的HTML <table> DataTable像这样

  $('#tbl').DataTable({ searching: false, paging: false, dom: 'Bfrtip', buttons: [ 'copy', 'csv', 'excel', 'pdf', 'print' ] });