在调整大小时更改 dataTables 页码

Question

我正在使用数据表 (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

有个Responsive extension for datatables. You can also try the solutions Here.

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

Datatables Pagination Pager 调整数字长度

一个好的备选方案 是在每次调整 window 大小时传递调用，从而避免 数据表 出错]

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

在调整大小时更改 dataTables 页码

change dataTables page number in resize

javascript

datatable

jquery

pager