DataTable：如何隐藏分页并仅在需要时显示？答案

【问题标题】：DataTable : How to hide the pagination and only show it as need?DataTable：如何隐藏分页并仅在需要时显示？
【发布时间】：2015-04-20 01:24:23
【问题描述】：

我有 2 个表正在使用 DataTable jQuery 插件。我想知道是否有办法在表格的右下角隐藏我的分页。

注意：

仅在需要时显示分页。
查询结果小于10时隐藏分页。

【问题讨论】：

不确定它是否重复，但您可以在此处查看更多信息 stackoverflow.com/questions/17832742/…
谢谢你，但我已经遇到了。通过应用"bPaginate": false 将禁用整个分页。当我需要一个时，这不会很好。但再次感谢您的建议。有更多 - 让他们来。
你可以使用CSS；如今，dataTables 对这些课程非常慷慨。
您可能想澄清“仅在需要时显示分页”。它有点隐藏在底部。如果没有页面存在，我假设它会隐藏它？
你明白了！如果没有，那就没有意义了。

标签： javascript jquery datatables jquery-datatables

【解决方案1】：

使用drawCallback 选项处理DT draw 事件并根据可用页面显示/隐藏分页控件：

$('#table_id').dataTable({
  drawCallback: function(settings) {
    var pagination = $(this).closest('.dataTables_wrapper').find('.dataTables_paginate');
    pagination.toggle(this.api().page.info().pages > 1);
  }
})

【讨论】：

太棒了。谢谢！

【解决方案2】：

  $('#dataTable_ListeUser').DataTable( {

        //usual pager parameters//

        "drawCallback": function ( settings ) {

        /*show pager if only necessary
        console.log(this.fnSettings());*/
        if (Math.ceil((this.fnSettings().fnRecordsDisplay()) / this.fnSettings()._iDisplayLength) > 1) {
            $('#dataTable_ListeUser_paginate').css("display", "block");     
        } else {                
            $('#dataTable_ListeUser_paginate').css("display", "none");
        }

        }
       });

【讨论】：

【解决方案3】：

使用'drawCallback'来解决这个问题。

1.在网页上，使用开发者工具检查'previous'按钮，你会发现一个div元素同时包裹了'previous'和'next'按钮。 DataTables 会根据您的 html 表格元素的 id 自动为该 div 分配一个 id。

例如，我有一个 id 为“Atable”的表。在这个表中，DataTables 自动创建了一个 id 名为 'Atable_paginate' 的 div 元素来包装上一个和下一个按钮。

2.对于drawCallback，我们写了一个函数来检查是否小于1页，如果是，我们利用id隐藏元素。

例如，您设置一页有20条记录

pageLength: 20,

这意味着如果记录少于 20 条，我们不需要显示“上一个”和“下一个”按钮。所以我们像下面这样写，

drawCallback: function(settings){
    if($(this).find('tbody tr').length <= 20){
        $('#Atable_paginate').hide();
    }
}

3.Atable的初始化应该如下所示

var table = $('#Atable').DataTable({
    pageLength: 20,
    lengthChange: false,
    drawCallback: function(settings){   
        if($(this).find('tbody tr').length <= 20){
            $('#Atable_paginate').hide();
        }
    }
});

4.如果网页上有多个表格，则对每个表格应用此方法。

【讨论】：

【解决方案4】：

您可以使用fnDrawCallback()方法隐藏dataTable中的分页。

var oTable = $('#datatable_sample').dataTable({
    "iDisplayLength": 10,    
    "fnDrawCallback": function(oSettings) {
        if ($('#datatable_sample tr').length < 10) {
            $('.dataTables_paginate').hide();
        }
    }
});

长度，您可以根据要在列表中显示的行来定义。

【讨论】：

【解决方案5】：

$(this) 对我不起作用，可能是因为我使用的是 TypeScript。因此，我使用了一种不同的方法来获取表包装器和 DataTables API 的 JQuery 元素。这受到 BitOfUniverse 答案的启发，并使用 DataTables 1.10 进行了测试。

打字稿：

'drawCallback': (settings: any) => {
      // hide pager and info if the table has NO results
      const api = new $.fn.dataTable.Api(settings);
      const pageCount = api.page.info().pages;

      const wrapper = $('#' + settings.sTableId).closest('.dataTables_wrapper');
      const pagination = wrapper.find('.dataTables_paginate');
      const info = wrapper.find('.dataTables_info');

      pagination.toggle(pageCount > 0);
      info.toggle(pageCount > 0);
 }

【讨论】：

【解决方案6】：

您可以在使用 Javascript 创建数据时提供选项

$('.examples').DataTable({ "paging": false });

此处列出了所有选项： http://www.datatables.net/reference/option/

【讨论】：

我需要Only show the pagination when I need one.的部分呢？
通过将其设置为 false，我的页面将永远加载，因为它充满了数据。这不好。 :) 感谢您的尝试。
这将通过所有方式删除分页。正如 user4287698 提到的，这并没有考虑“仅在需要时显示分页”
如果您在实例化 DataTables 之前做出决定，那么您可以传入值 false 或 true。我只是在调用 DataTable 之前计算我的记录，如果小于 10 则设置为 false，否则设置为 true。