Search code examples
datatablepagination

How to change number of pages to be displayed on datatable pagination


I want to control the number of pages being displayed in pagination of Data table. I have searched a lot and I always get page.length option of Data table. Actually my problem is, the pages on desktop view seems to be fine as: [![Desktop pagination][1]][1]

But as soon as I get into mobile view, the pagination breaks and looks like:

[![Mobile pagination][2]][2]

So I want the pagination to be in a single row and therefore, I want to reduce the number of pages displaying in pagination. So in mobile view, it should be like previous 1 2 ... 19 next but in desktop view, it remain the same.

The code I have used to initialize datatable is:

$('.products-server-side-data-table').DataTable({// eslint-disable-line new-cap
    'autoWidth': false,
    'processing': true,
    'serverSide': true,
    'pageLength': 10,
    'sort': false,
    'info' : true,
    'searching': true,
    'ajax': {
             //ajax call
}

I have tried different options like:

"pagingType": "full_numbers_no_ellipses"
"sPaginationType": "four_button"

and

"sPaginationType": "listbox"

But none of them changed pagination even a bit. Please help me. [1]: https://i.sstatic.net/ZlWGG.png [2]: https://i.sstatic.net/5ALel.png


Solution

  • I finally found an answer for this. In order to set the number of pagination button, the following jquery function is helpful:

    $.fn.DataTable.ext.pager.numbers_length = 5;
    

    Reference: change number of pagination button Datatable