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

Question

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

jqueryhtmldatatables

324

我正在使用jQuery DataTables。

我想要移除默认添加到表格中的搜索栏和底部显示可见行数的页脚。基本上，我只想使用这个插件进行排序。能否做到这一点？

- leora

您可以按照此处的描述有效地使用sDom - https://dev59.com/ulQJ5IYBdhLWcg3wbFSx#53885264 - Tushar Walzade

1

使用 dom: 'lrtip' 选项 - Taufik Nur Rahmanda

23个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- venky · Answer 1

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

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

- Hitesh Sahu · Answer 2

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

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

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

- Antonio B L Jr · Answer 3

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

- Justget Meinside · Answer 4

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

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

它隐藏了搜索和分页框。

- Herbert Kimani · Answer 5

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

- Hamim Kavuk · Answer 6

对我来说可行;

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

- Jeromy French · Answer 7

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

- DataTables文档：HTML5 data-*属性-表选项因此，您可以在表上指定。例如，此表将不允许搜索，应用分页或显示信息块：

<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选项。

- Rishikant Srivastava · Answer 8

这对我很有用 #table 是表格的ID

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

- Isuru Dilshan · Answer 9

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

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

- graphicdivine · Answer 10

0

你可以通过CSS来隐藏它们。

#example_info, #example_filter{display: none}

- graphicdivine

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