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
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