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

Question

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.

enter image description here

Note:

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

Not sure if its a duplicate but you can see some more info here https://stackoverflow.com/questions/17832742/how-to-remove-pagination-in-datatable — Kalel Wade, Feb 18 '15 at 21:05
Thanks for that, but I came across that already. By applying `"bPaginate": false` will take disable the whole pagination. That's not gonna be good when I need one. But thanks again for your suggestion. Have more - keep them coming. — , Feb 18 '15 at 21:09
you can use CSS; dataTables is pretty generous with the classes these days. — dandavis, Feb 18 '15 at 21:10
**You got it !** There is not point of showing it, if there is none. — , Feb 18 '15 at 21:20

score 62 · Answer 1 · answered Aug 09 '16 at 14:38

Use drawCallback option to handle DT draw event and show/hide pagination control based on available pages:

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

score 4 · Answer 2 · answered Jul 25 '16 at 13:55

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

        }
       });

Xie Jun · Answer 3 · 2017-12-13T03:09:16.277

Use 'drawCallback' to solve this problem.

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.

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.

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

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

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,

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

3.The initialization of Atable should be like below

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.

score 3 · Answer 4 · answered Mar 07 '18 at 17:00

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

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

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

Georg Patscheider · Answer 5 · 2017-09-01T07:56:11.393

$(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.

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

score -2 · Answer 6 · answered Feb 18 '15 at 21:12

-2

You can give options when you create your datables on Javascript

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

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

answered Feb 18 '15 at 21:12

Joris Buchou

128
7

2

what about the part where I need `Only show the pagination when I need one.` ? – Feb 18 '15 at 21:15
2

By setting it to false, my page will take forever to load because it full with data. That's not good. :) Thanks for trying. – Feb 18 '15 at 21:16
1

this would remove the pagination by all means. As user4287698 mentioned, this doesn't take it consideration "only show the pagination when I need one" – Saulo Aguiar Sep 01 '17 at 21:37
If you make the decision before you instantiate your DataTables then you can pass in the value false or true. I am simply counting my records before calling DataTable and set false if less than 10, otherwise true. – NickOpris Mar 20 '19 at 19:00

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

Note:

6 Answers6

Linked