在调整大小时更改 dataTables 页码

Posted 2023-05-07

【中文标题】在调整大小时更改 dataTables 页码

【英文标题】：change dataTables page number in resize

【发布时间】：2019-10-17 10:33:31

【问题描述】：

我正在使用 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;
   
);

【问题讨论】：

你试过“pagingType”选项吗？ “pageLength”是每页显示多少行。 datatables.net/reference/option/pagingType

@daddygames 我更新了我的代码但没有工作:(

【参考方案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);
);

【参考方案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');
);

【参考方案3】：

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

【讨论】：

这不是我需要的，我需要更改寻呼机而不是列。