change dataTables page number in resize

Question

I'm using dataTables (https://datatables.net) and trying to do a responsive page number, I need this:

Desktop: first prev 1 2 3 4 5 next last

Mobile: first prev 1 2 3 next last

Actually with my code I get this on mobile, nothing change: first prev 1 2 3 4 5 next last

This is my code:

$(window).resize(function () {
   if ($(this).outerWidth() < 768){
      // change the dataTable pageLength in here
      $.fn.DataTable.ext.pager.numbers_length = 3;     
   } else {
      // default pageLength
      $.fn.DataTable.ext.pager.numbers_length = 5;
   }
});

Have you tried the "pagingType" options? "pageLength" is how many rows to show per page. https://datatables.net/reference/option/pagingType — daddygames, May 31 '19 at 19:36

score 0 · Answer 1 · answered May 31 '20 at 14:31

Datatables Pagination Pager Adjust numbers length

A good alternative would be to pass the call every time you resize the window, thus avoiding errors with the datatables

// Adjust Pagination number page
$.dt_adjust_pager_number = function(dtable){
    var ipag = $.fn.DataTable.ext.pager.numbers_length,i,
      w = document.documentElement.clientWidth;
    // window.screen.width -> This only tends to identify that the customer at a wide screen is not advisable to use it for a responsive 
    if (w < 768) {
        i = 4;
    } else if (w <= 1024) {
        i = 5;
    } else if ( w > 1024) {
        i = 7;
    }
    //console.log(ipag,i);
    if (i && ipag != i ){
        $.fn.DataTable.ext.pager.numbers_length = i;
        if (typeof dtable == 'object'){
            dtable.draw( 'page' );
            //Other alternatives:
            //dtable.columns.adjust().draw( 'page' );
            //dtable.page(0).draw( 'page' );
        }
    }
};
// init ready window
$.dt_adjust_pager_number();

var osTable = $('#table').DataTable(); // $.fn.dataTable.tables();

$(window).resize(function () {
    if (window.tmdoit){
        window.clearTimeout(window.tmdoit);
    }
    window.tmdoit = window.setTimeout(function(){
        $.dt_adjust_pager_number(osTable);
    },400);
});

score -1 · Answer 2 · answered May 31 '19 at 22:23

-1

There is a Responsive extension for datatables. You can also try the solutions Here.

answered May 31 '19 at 22:23

reasonet

145
12

that's no what I need, I need to change the pager not the columns. – user3342679 Jun 02 '19 at 04:42

score -1 · Accepted Answer · edited Dec 08 '22 at 17:36

I needed the same solution and solved it only by redrawing the page area.

https://datatables.net/reference/api/draw()

let $landingPaginationTable = $('.landing-table.pagination-table');

$(window).resize(() => {
    if (window.screen.width < 768) {
        $.fn.DataTable.ext.pager.numbers_length = 3;
    } else if (window.screen.width <= 1024) {
        $.fn.DataTable.ext.pager.numbers_length = 5;
    } else {
        $.fn.DataTable.ext.pager.numbers_length = 7;
    }

    $landingPaginationTable.DataTable().draw('page');
});

change dataTables page number in resize

3 Answers3