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

Posted 2023-05-09

【中文标题】如何删除 jQuery DataTables 插件添加的搜索栏和页脚？

【英文标题】：How can I remove the search bar and footer added by the jQuery DataTables plugin?

【发布时间】：2018-01-06 11:59:30

【问题描述】：

我正在使用jQuery DataTables。

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

【问题讨论】：

您可以有效地使用sDom，如此处所述 - ***.com/a/53885264/5729813

使用dom: 'lrtip'选项

【参考方案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 为真时），f char 表示 dom 中的过滤器（搜索）html，ip 表示信息和分页（页脚）。

对于 DataTables ，使用：

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

或使用纯 CSS：

.dataTables_filter, .dataTables_info  display: none; 

【讨论】：

与@antpaw 评论一样好，并且似乎在大多数情况下都有效，但如果每列都在进行过滤，它就不起作用，就像在这个例子中一样：datatables.net/release-datatables/extras/FixedColumns/…。请注意！

@JanisPeisenieks 示例 URL 已损坏：datatables.net/extensions/fixedcolumns

我不明白为什么这被接受，因为它没有回答问题。问题是删除搜索栏和页脚，而不是完全禁用搜索。

要完全删除页脚，您必须设置 paging:false 和 info:false ，而不仅仅是 paging:false

添加到@user1563544 的评论中，有没有办法只隐藏搜索栏而不禁用该功能？ （除了 CSS 技巧？）

【参考方案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
                  );
 );

【讨论】：

@Eric 谢谢它为我工作，但我只想显示“bPaginate”我不想显示“binfo”如果我做了“bInfo”= false 和“我该如何实现” bPaginate"= true 然后两者都显示

在最新版本的DataTables中只是paging: false, info: false

【参考方案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

【讨论】：

这应该添加到蚁爪的答案中。这有效地隐藏了在传递 "bFilter": false, "bInfo": false 时仍然保留的过滤器和信息占位符 div。

这会删除页脚中的分页。我认为这不是一个好习惯。

现在称为“dom”，您可以使用此选项进行更多控制。见datatables.net/reference/option/dom

这其实是正确的答案。涉及 css 和 js 调整的其他答案都是 hack。如果您想正确使用 DataTables，您可以这样做。例如，如果您想显示除搜索框以外的所有位和部分（分页、页长等），您可以添加一个值为ltipr 的dom 属性，参见datatables.net/reference/option/dom跨度>

【参考方案4】：

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

【参考方案5】：

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

【参考方案6】：

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

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

【参考方案7】：

如果您使用的是主题滚轮：

.dataTables_wrapper .fg-toolbar  display: none; 

【讨论】：

+1 谢谢，这为我指明了正确的方向。我也不想隐藏页眉，所以我只想要页脚。 ui-corner-bl 和 ui-corner-br 类仅适用于页脚，所以我使用其中任何一个来获取页脚包装............ $(".ui-corner-bl").hide( );

【参考方案8】：

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

此属性也允许为元素设置一些类或 id，因此您可以更轻松地进行时尚。

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

这个例子只显示表格：

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

【参考方案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

【讨论】：

此答案没有任何文档的链接，您也没有提供有效的答案

【参考方案10】：

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

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

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

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

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

);

【参考方案11】：

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

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

【参考方案12】：

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

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

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

【参考方案13】：

你可以通过 css 隐藏它们：

#example_info, #example_filterdisplay: none

【讨论】：

不是“错”，只是不同。这取决于您是要隐藏所有实例（按类，如您的答案）还是特定实例（按 ID，如我的）。

【参考方案14】：

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

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

它隐藏了搜索和寻呼框。

【参考方案15】：

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

-dataTables documentation: HTML5 data-* attributes - table options

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

<table id="example" class="display"  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&amp;d=identicon&amp;r=PG"  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&amp;d=identicon&amp;r=PG"  style="width: 64px; height: 64px; visibility: visible;"></td>
            <td>2011/07/25</td>
            <td>$170,750</td>
        </tr>
        ...[ETC]...
    </tbody>
</table>

见a working example at https://jsfiddle.net/jhfrench/17v94f2s/。

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

【参考方案16】：

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

【参考方案17】：

这对我有用#table is a Id of table

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

【参考方案18】：

它对我有用；

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

【讨论】：

这个“新”答案所做的唯一事情就是重复一半其他答案已经说过的话，包括the accepted answer。

【参考方案19】：

我通过为页脚分配一个 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;

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

【参考方案20】：

我认为最简单的方法是：

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

你可以只编辑你要修改的表格，不改变常用的CSS或JS。

【参考方案21】：

没有过滤输入控件。 (https://datatables.net/reference/option/dom)

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