JQuery Pagination - how to adapt to a different format

Question

I decided to use the tutorial in PacktPub mainly because I didn’t need all the functions of the DataTable, and I didn’t use “I want to spend a lot of time trying to figure out how I need it.

My problem with this tutorial is pagination. I do not want this to look like this:

1 2 [3] 4 5

Instead, I want it to look like

< [#] >

[#] will be an input field in which the user can enter a number, and he will automatically go to this page. Arrows on both sides, they will be disabled and activated depending on which page it is on and how many pages. For example, if it was on page 1, the button will have a class of "off." If there were more than 1 page, then the> button would be indicated with the class "on".

I attached a screenshot of how it might look:

(image not available)

I am a little fixated on how I can 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'); }); });

Answer 1

I will consider something like this for 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 run a check for user input.