CODEWITHSUNDEEP
jquerypaginationdatatables
NoviceCoder
NoviceCoder

Reputation: 31

DataTables numbers_length = 3 change pagination buttons

By setting the numbers_length property to 3, I am able to produced this

enter image description here

Is there any way I can get only 3 Page numbers (previous, current and next) like this :

enter image description here

Upvotes: 1

Views: 4582

Answers (1)

Gyrocode.com
Gyrocode.com

Reputation: 58880

SOLUTION

You can use our plug-in Simple Numbers - No Ellipses.

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

However this plug-in shows "Previous" and "Next" buttons. To overcome that use the modified code below.

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

See this jsFiddle for code and demonstration.

LINKS

Upvotes: 2

Related Questions