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

Question

我正在使用jQuery DataTables。

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

- leora

---

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

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

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字符表示dom中的过滤器（搜索）html，ip表示信息和分页（页脚）。

对于DataTables <1.10，请使用：

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

或者使用纯CSS：

.dataTables_filter, .dataTables_info { display: none; }

- antpaw

---

虽然@antpaw的评论很好，并且在大多数情况下似乎有效，但如果每列进行过滤，就像在此示例中：http://datatables.net/release-datatables/extras/FixedColumns/col_filter.html ，它就无法起作用。请注意！ - Janis Peisenieks

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

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

除了 CSS 技巧之外，有没有办法只隐藏搜索栏而不禁用其功能？（补充 @user1563544 的评论） - vignz.pie

错误答案 - searching: false 会完全禁用 DT 的 search() 函数。 - Umair Ayub

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
                 } );
} );

- Eric

---

@Eric 谢谢，它对我有用，但我只想显示“bPaginate”，不想显示“binfo”，如果我设置“bInfo”= false 和 “bPaginate”= true，那么两者都会显示，我该如何实现？ - amit

在最新版本的DataTables中，只需使用 {paging: false, info: false}。 - josemmo

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

- Scott Stafford

---

这应该添加到antpaw的答案中。这有效地隐藏了过滤器和信息占位符div，在传递"bFilter": false， "bInfo": false时仍然存在。 - tibc-dev

这将删除页脚中的分页。我认为这并不是一个好的做法。 - Anirudh

现在它被称为“dom”，您可以使用此选项控制更多内容。请参阅https://datatables.net/reference/option/dom - unkreativ

这实际上是正确的答案。其他涉及 CSS 和 JS 调整的答案都是 hack。如果您想正确使用 DataTables，就应该这样做。例如，如果您想显示所有细节（分页、页面长度等），但不包括搜索框，您可以添加一个 dom 属性，并将其值设置为 ltipr，请参见 https://datatables.net/reference/option/dom。 - onefootswill

Answer 4

如果您正在使用自定义筛选器，则可能希望隐藏搜索框但仍要启用筛选功能，因此bFilter:false不是解决方法。可以使用dom:'lrtp'代替，默认值为'lfrtip'。文档：https://datatables.net/reference/option/dom

- sulaiman sudirman

Answer 5

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

- Pietro La Grotta

Answer 6

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

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

- kgiannakakis

Answer 7

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

此属性还允许将一些类或ID设置给一个元素，以便更轻松地进行样式设置。

请查看官方文档：https://datatables.net/reference/option/dom 下面的示例只会显示表格：

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

- Grirg

Answer 8

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

在您的datatable构造函数中，参考以下链接中的代码以移除搜索框中的交叉图标：https://datatables.net/forums/discussion/20006/how-to-remove-cross-icon-in-search-box。

- Gaurav Bhatra

---

此答案不涉及任何文档链接，并且您没有提供有效的答案。 - elad silver

Answer 9

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

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

但是如果想要隐藏空的页脚，可以使用以下代码：

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

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

});

- Shayan Sulehri

Answer 10

如果您正在使用Themeroller：

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

- paja01

---

+1 谢谢，这指引了我正确的方向。我不想隐藏页眉，只想隐藏页脚。ui-corner-bl和ui-corner-br类仅应用于页脚，因此我使用其中之一来获取页脚包装器........ $(".ui-corner-bl").hide(); - Kevbo