You can add the same way you created the pages, following the implementation of the buttons you requested, which work exactly the same as paging:
Previous (prev) 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');
Next button (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');
First button
$('<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 the javascript and they will be working, here's an example working on JSFiddle .
Observations:
The implementation of the buttons follows the same logic of the implementation of the pages however 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% with the help of the functions currentPage+1
and prev()
of jquery that identify the previous element (prev) and the next element respectively, it was possible to add the class next()
to the element thus realizing the visual transition and setting the active
as I said earlier, it is possible to make this transition in the table itself. For the first one would just select the first page, which would be the currentPage
element because of the first and previous buttons that are 2
and 0
. Now the last one, you should just take the size of your pagination and decrease 1 that would be to set 1
to currentPage
, however the visual part to add numPages-1
in this case would be active
element because of the fact that there are two buttons at the end that would be the next and the last one.