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

Question

我正在使用 jQuery DataTables。

我想删除默认添加到表格中的搜索栏和页脚（显示可见的行数）。基本上我只想使用这个插件进行排序。这可以做到吗？

Answer 1

对于 DataTables >=1.10，请使用：

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

如果您仍然希望能够使用此插件的 .search() 功能，则需要隐藏搜索栏带有 dom 设置的 html：

$('table').dataTable({dom: 'lrt'});

默认值为 lfrtip 或 <"H"lfr>t<"F"ip> （当 >jQueryUI 为 true），f char 表示 dom 中的过滤器（搜索）html，ip 表示信息和分页（页脚）。

对于 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 获取列表显示/隐藏的功能。

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

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

Answer 3

您也可以通过设置 sDom 来完全不绘制页眉或页脚：http:// /datatables.net/usage/options#sDom

'sDom': 't' 

将仅显示表格，不显示页眉或页脚或任何内容。

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

Answer 4

如果您使用自定义过滤器，您可能想隐藏搜索框但仍想启用过滤器功能，因此 bFilter: false 不是方法。使用 dom: 'lrtp' 代替，默认为 'lfrtip'。文档：https://datatables.net/reference/option/dom

Answer 5

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

Answer 6

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

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

Answer 7

正如 @Scott Stafford 所说，sDOM 是显示、隐藏或重新定位组成 DataTable 的元素的最合适的属性。我认为 sDOM 现在已经过时了，通过实际补丁，该属性现在是 dom。

这个属性也允许为元素设置一些类或id，这样你就可以更轻松地设计。

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

这个示例只会显示表格：

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

Answer 8

如果您使用主题滚轮：

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

Answer 9

<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 10

这可以通过简单地更改配置来完成：

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

但是要隐藏空页脚；这段代码可以解决这个问题：

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

      //add these config to remove empty header
      "bJQueryUI": true,
      "sDom": 'lfrtip'

});

Answer 11

在这里您可以将 sDom 元素添加到您的代码中，顶部搜索栏被隐藏。

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

Answer 12

提醒您不能在同一个 元素上初始化 DataTable 两次。

如果您遇到同样的问题，则可以设置 <在 HTML 上初始化 DataTable 时，code>searching 和 paging false，如下所示

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

Answer 13

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

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

它隐藏搜索和寻呼机框。

Answer 14

从 DataTables 1.10.5 开始，现在可以定义初始化
使用 HTML5 data-* 属性的选项。

-dataTables 文档：HTML5 data-* 属性 - 表选项

因此，您可以在表上指定data-searching="false" data-paging="false" data-info="false"。例如，此表不允许搜索、应用分页或显示信息块：

<table id="example" class="display" width="100%" data-searching="false" data-paging="false" data-info="false">
    <thead>
        <tr>
            <th>Name</th>
            <th data-orderable="false">Avatar</th>
            <th>Start date</th>
            <th>Salary</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Tiger Nixon</td>
            <td><img src="https://www.gravatar.com/avatar/8edcff60cdcca2ad650758fa524d4990?s=64&d=identicon&r=PG" alt="" style="width: 64px; height: 64px; visibility: visible;"></td>
            <td>2011/04/25</td>
            <td>$320,800</td>
        </tr>
        <tr>
            <td>Garrett Winters</td>
            <td><img src="https://www.gravatar.com/avatar/98fe9834dcca2ad650758fa524d4990?s=64&d=identicon&r=PG" alt="" style="width: 64px; height: 64px; visibility: visible;"></td>
            <td>2011/07/25</td>
            <td>$170,750</td>
        </tr>
        ...[ETC]...
    </tbody>
</table>

请参阅 https 上的工作示例://jsfiddle.net/jhfrench/17v94f2s/。

这种方法的优点是它允许您进行标准的 dataTables 调用（即 $('table.apply_dataTables').DataTable()），同时能够按表配置 dataTables 选项-桌子。

Answer 15

如果您只想隐藏搜索表单，例如因为您有列输入过滤器，或者可能是因为您已经有一个能够从表中返回结果的 CMS 搜索表单，那么您所要做的就是检查表单并获取其 id - （在撰写本文时，它看起来像这样[tableid]-table_filter.dataTables_filter）。然后只需执行 [tableid]-table_filter.dataTables_filter{display:none;} 保留数据表的所有其他功能。

Answer 16

这对我有用 #table 是表的 ID

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

Answer 17

它对我有用；

您可以使用表上的此属性删除搜索栏：data-searching="false"

Answer 18

$('#my_table').DataTable({
   "iDisplayLength": 100,
   "searching": false, 
   "paging": false,
   "info": false,
});

Answer 19

你可以通过 css 隐藏它们：

#example_info, #example_filter{display: none}

Answer 20

我认为最简单的方法是：

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

只编辑你要修改的表格，而不改变常见的CSS或JS。

Answer 21

无过滤输入控制。 (https://datatables.net/reference/option/dom)

    /* Results in:
        {length}
        {processing}
        {table}
        {information}
        {pagination}
    */
    $('#example').dataTable( {
      "dom": 'lrtip'
    } );

Answer 22

        $(document).ready(function() {          
        var table = $('#example').DataTable({
          dom: 'lrt',
          paging: false,
          info: false,
          "search": {
            "caseInsensitive": true
          }
        });
      $('#txtSearch').on('keyup change', function() {
        dataTable_Search($(this).val());
      });

      $('#btnClear').on('click', function() {
        $('#txtSearch').val('');
        dataTable_Search('');
      });

      function dataTable_Search(v) {
        table.search(v).draw();
      }
    });

提琴手：https://jsfiddle.net/godlymathew/mbn78xdh/

Answer 23

我通过为页脚分配一个 id 然后使用 css 进行样式设置来完成此操作：

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

然后使用 css 进行样式设置：

#FooterHidden{
   display: none;
}

如上所述，方法对我不起作用。