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.

Answer 1

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.