Implement navigation with buttons: [first] [next] [previous] [last]

Question

Explanation:

I have an HTML+jQuery table and I have an enumerated pagination that is functional, but I would like to add an additional navigation to it.

Question:

I would like to add an implementation, of which, it would be a navigation with 4 buttons that should work as follows:

1. Knob: First - functionality: navigate to the first page.
2. Knob: Previous - functionality: navigate to the previous page.
3. Knob: Next - functionality: navigate to the next page.
4. Knob: Last - functionality: navigate to the last page.

Observing:

I use jQuery paginate in my table, as the example demonstrates.

Example:

Jsfiddle

SOLUTION

found this jquery plugin on the net, solved my case, thanks jQuery*-*

http://datatables.net/

Answer 1

You can add the same way you created the pages, follow the implementation of the buttons you requested, which work exactly the same way as pagination:

Previous button (previous button)

$('<span class="page-number"></span>').text('Ant.').bind('click', { 
        newPage: currentPage-1
}, function(event) { 
    if (currentPage > 0){
      currentPage = currentPage-1;//event.data['newPage'];
      $table.trigger('repaginate');
      var pgSelected = $('.active').prev();
      $(this).siblings().removeClass('active');    
      pgSelected.addClass('active');
    }
}).prependTo($pager).addClass('clickable');

Button Next(next)

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

Button First(first)

$('<span class="page-number"></span>').text('First').bind('click', { 
        newPage: 1
    }, function(event) { 
        currentPage = 1;//event.data['newPage'];
        $table.trigger('repaginate');
        var pgSelected = $('.page-number').eq(2);
        $(this).siblings().removeClass('active');    
        pgSelected.addClass('active');
    }).prependTo($pager).addClass('clickable');

Last button ()

$('<span class="page-number"></span>').text('Ult.').bind('click', { 
        newPage: numPages-1
    }, function(event) { 
        currentPage = numPages-1;//event.data['newPage'];
        $table.trigger('repaginate');
        var pgLen = $('.page-number').length;
        var pgSelected = $('.page-number').eq(pgLen-3);
        $(this).siblings().removeClass('active');    
        pgSelected.addClass('active');
    }).appendTo($pager).addClass('clickable')

Just add these codes to javascript and they will be working, follow example working on Jsfiddle.

Remarks:

The implementation of the buttons follows the same logic of the implementation of the pages but the change is in the control of the current page (currentPage) and page to be selected by the table, so in the case of the next and previous is simply currentPage-1 and currentPage+1 with the help of functions prev() and next() jquery that identify the previous element(Prev) and the next element(next) respectively, it was possible to add the class active for the element thus performing the visual transition and setting the currentPage As I said earlier, it is possible to make this transition on the table itself. For the first would just select the first page, which would be the element 2 because of the first and previous buttons that are 0 and 1. Already the last, you should just take the size of your pagination and decrease 1 that would set the currentPage for numPages-1, but the visual part to add the active in this case would be the element numPages-3 by the fact that there are two buttons at the end that would be the next and the last.