jQuery Pagination - how to adapt to a different format

Question

Hey everyone,

I decided to use the tutorial over at PacktPub mainly because I didn't need all the features of DataTable and I didn't want to have to spend a lot of time trying to get it styled exactly how i wanted it.

My problem with this tutorial is the pagination. I dont want it to look like this:

1 2 [3] 4 5

Instead I want it to look like

< [#] >

The [#] will be an input field where the user can enter in a number and it will automatically go to that page. The arrows on either side, they will disable and enable depending on what page its on and how many pages there are. For instance if it was at Page 1, then the < button would have a class of "off". If there were more than 1 pages then the > button would be styled with the class "on".

I've attached a screenshot of how I may want it to look:

I'm a bit stuck as to how I may achieve this with this code:

$(document).ready(function() {
$('table.paginated').each(function() {
var currentPage = 0;
var numPerPage = 10;

var $table = $(this);

$table.bind('repaginate', function() {
  $table.find('tbody tr').show()
    .lt(currentPage * numPerPage)
      .hide()
    .end()
    .gt((currentPage + 1) * numPerPage - 1)
      .hide()
    .end();
});

var numRows = $table.find('tbody tr').length;
var numPages = Math.ceil(numRows / numPerPage);

var $pager = $('<div class="pager"></div>');
for (var page = 0; page < numPages; page++) {
  $('<span class="page-number">' + (page + 1) + '</span>')
   .bind('click', {'newPage': page}, function(event) {
     currentPage = event.data['newPage'];
     $table.trigger('repaginate');
     $(this).addClass('active').siblings().removeClass('active');
   })
   .appendTo($pager).addClass('clickable');
}
$pager.find('span.page-number:first').addClass('active');
$pager.insertBefore($table);

$table.trigger('repaginate'); }); });

Saweet! Thanks in advanced!

Michael

Answer 1

I will consider something like this for the pagination.

<div class="pager">
  <span class="clickable left-arrow"></span>
  <input type="text" name="pagerbox" value="1" />
  <span class="clickable right-arrow"></span>
</div>

Here is my solution.

// This function will disabled or enabled the right arrows, depending
// on the currentPage value.
var checkPagerArrows() = function() {   
  $leftArrow.removeClass('disabled');       
  if(currentPage == 0){ $leftArrow.addClass('disabled'); }   
  $rightArrow.removeClass('disabled');   
  if(currentPage == (numPages - 1){ $rightArrow.addClass('disabled'); } 
};

// This functions moves to a specified page. Handles validation.
var goToPage = function(pageNumber){
  var pageTo = parseInt(pageNumber);
  // Makes sure pageTo is a number and is in a valid page range
  if(isNaN(pageTo ) || pageTo < 0 || pageTo > (numPages - 1)){
    // Enter your code for error messages, or custom control
    return;
  }
  currentPage = pageTo;
  checkPagerArrows();
  $table.trigger('repaginate');
};

var $pager = $('<div class="pager"></div>');

// Create the left arrow.
var $leftArrow = $('<span class="clickable left-arrow"></span>')
  // Add the click functionality.
  .click(function(){ goToPage(currentPage - 1); })
  // Append to pager.
  .appendTo($pager);

// Create the input box.
var $pagerBox = $('<input type="text" name="pagerbox" value="1" />')
  // Add functionality
  .change(function(){
    var pageVal = parseInt($(this).attr('value'));
    if(isNaN(pageVal)){ return; }
    goToPage(pageVal - 1); // Make it zero based.
  })
  .appendTo($pager);

var $rightArrow = $('<span class="clickable right-arrow"></span>')
  .click(function(){ goToPage(currentPage + 1); })
  .appendTo($pager);

$pager.insertBefore($table);

REMEMBER: To do the validation for the user input.