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

DataTable : How to hide the pagination and only show it as need?

提问by BitOfUniverse

I have 2 tables that are using DataTable jQuery Plug-in. I wondering if there is a way to hide my pagination on the bottom right of my table.

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

Note:

笔记：

• Only show the pagination when I need one.
• Hide the pagination when the query results is less than 10.

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

回答by BitOfUniverse

Use drawCallbackoption to handle DT drawevent and show/hide pagination control based on available pages:

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

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

回答by Xie Jun

Use 'drawCallback' to solve this problem.

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

1.On the webpage, use developer tool to inspect the 'previous' button, then you will find a div element that wraps both the 'previous' and 'next' buttons. DataTables automatically assigned an id to this div based on your html table element's id.

1.在网页上，使用开发者工具检查“上一个”按钮，然后您会发现一个包含“上一个”和“下一个”按钮的div元素。DataTables 会根据您的 html table 元素的 id 自动为该 div 分配一个 id。

For example, I have a table with id 'Atable'. In this table, DataTables automatically created a div element with id called 'Atable_paginate' to wrap the previous and next buttons.

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

2.For drawCallback, we write a function which checks if there is less than 1 page, if so, we hide element by utilising id.

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

For example, you have set there are 20 records on one page by

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

pageLength: 20,

which means if there are less then 20 records, we don't need to display 'previous' and 'next' buttons. So we write like below,

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

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

3.The initialization of Atable should be like below

3.Atable的初始化应该如下

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

4.If there are more than one table on the webpage, apply this method on each table.

4.如果网页上有不止一张桌子，每张桌子都用这个方法。

回答by Matoeil

  $('#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");
        }

        }
       });

回答by Sreejith Gopinath

You can use fnDrawCallback()method to hide the paginationin dataTable.

您可以使用fnDrawCallback（）方法来隐藏分页中的dataTable。

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

The lengthwhich you can define as per the row you want to display in the listing.

的长度，你可以定义为每个要在列表中显示的行。

回答by Georg Patscheider

$(this)did not work for me, probably because I am using TypeScript. So I used a different approach to get the JQuery element for the table wrapper and the DataTables API. This has been inspired by the answer of BitOfUniverse and tested with DataTables 1.10.

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

TypeScript:

打字稿：

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

回答by Joris Buchou

You can give options when you create your datables on Javascript

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

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

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

All options are listed here: http://www.datatables.net/reference/option/

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