在调整大小时更改 dataTables 页码

Question

我正在使用 dataTables (https://datatables.net) 并尝试做一个响应式页码，我需要这个：

桌面： 第一个 上一个 1 2 3 4 5 下一个 最后一个

手机： 第一个 上一个 1 2 3 下一个 最后一个

实际上，我的代码是在移动设备上得到的，没有任何改变： 第一个 上一个 1 2 3 4 5 下一个 最后一个

这是我的代码：

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

Answer 1

数据表分页分页器调整数字长度

一个好的替代方法是在每次调整窗口大小时传递调用，从而避免数据表

出现错误

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

Answer 2

我需要相同的解决方案，只是通过重绘页面区域来解决。

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

$ 字符只是window.jQuery 的快捷方式。

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

Answer 3

数据表有一个Responsive 扩展名。也可以试试Here的解决方案。