Question

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

桌面：首页上一页1 2 3 4 5下一页末页

实际上，通过我的代码，我可以在移动设备上进行操作，没有任何变化：首页上一页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扩展名。您也可以尝试解决方法Here。

Answer 2

数据表分页寻呼机调整数字长度

一个好的替代性是每次您调整窗口大小时都会通过呼叫，从而避免数据表

出错

// 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页码的大小

2 个答案: