DataTables numbers_length = 3 更改分页按钮

Question

通过将 numbers_length 属性设置为 3，我可以生成这个

有什么方法我可以像这样只获得 3 个页码（上一个、当前和下一个）：

Answer 1

解决方案

您可以使用我们的插件Simple Numbers - No Ellipses。

$(document).ready(function() {
   $('#example').dataTable({
      'pagingType': 'simple_numbers_no_ellipses'
   });
});

但是，此插件显示“上一个”和“下一个”按钮。为了克服这个问题，请使用下面的修改代码。

$.fn.DataTable.ext.pager.numbers_no_ellipses = function(page, pages){
   var numbers = [];
   var buttons = $.fn.DataTable.ext.pager.numbers_length;
   var half = Math.floor( buttons / 2 );

   var _range = function ( len, start ){
      var end;

      if ( typeof start === "undefined" ){
         start = 0;
         end = len;

      } else {
         end = start;
         start = len;
      }

      var out = [];
      for ( var i = start ; i < end; i++ ){ out.push(i); }

      return out;
   };


   if ( pages <= buttons ) {
      numbers = _range( 0, pages );

   } else if ( page <= half ) {
      numbers = _range( 0, buttons);

   } else if ( page >= pages - 1 - half ) {
      numbers = _range( pages - buttons, pages );

   } else {
      numbers = _range( page - half, page + half + 1);
   }

   numbers.DT_el = 'span';

   return [ numbers ];
};

$(document).ready(function (){   
   var table = $('#example').dataTable({
      pagingType: 'numbers_no_ellipses'
   });
});

有关代码和演示，请参阅 this jsFiddle。

链接

• jQuery DataTables: Pagination without ellipses