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

Question

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

score 588 · Accepted Answer

对于DataTables >=1.10，使用：

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

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

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

默认为lfrtipor <"H"lfr>t<"F"ip>（当jQueryUI为true时），fchar代表dom中的过滤器（搜索）html，ip用于信息和分页（页脚）。

对于DataTables <1.10，请使用：

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

或使用纯 CSS：

.dataTables_filter, .dataTables_info { display: none; }

score 91 · Accepted Answer

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

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

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

score 43 · Accepted Answer

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

'sDom': 't'

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

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

score 26 · Accepted Answer

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

score 11 · Accepted Answer

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

score 7 · Accepted Answer

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

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

score 4 · Accepted Answer

4

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

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

于 2010-02-26T11:51:29.150 回答

score 4 · Accepted Answer

<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

score 4 · Accepted Answer

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

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

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

此示例将仅显示表格：

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

score 4 · Accepted Answer

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

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

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

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

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

});

score 3 · Accepted Answer

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

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

score 2 · Accepted Answer

只是提醒您不能DataTable对同一<table>元素进行两次初始化。

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

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

score 1 · Accepted Answer

1

您可以通过 css 隐藏它们：

#example_info, #example_filter{display: none}

于 2009-12-17T10:00:03.707 回答

score 1 · Accepted Answer

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

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

它隐藏了搜索和寻呼框。

score 1 · Accepted Answer

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

- dataTables 文档：HTML5 数据-* 属性 - 表格选项

所以你可以data-searching="false" data-paging="false" data-info="false"在table. 例如，此表将不允许搜索、应用分页或显示信息块：

<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&amp;d=identicon&amp;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&amp;d=identicon&amp;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 选项。

score 1 · Accepted Answer

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

score 1 · Accepted Answer

这对我有用#table是表的ID

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

score 1 · Accepted Answer

1

这个对我有用;

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

于 2022-01-14T21:17:46.443 回答

score 0 · Accepted Answer

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

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

score 0 · Accepted Answer

我认为最简单的方法是：

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

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

score 0 · Accepted Answer

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

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

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

21 回答 21

Related

Reference