I have this famous code:
$('table.paginated').each(function() {
var currentPage = 0;
var numPerPage = 3;
var $table = $(this);
$table.bind('repaginate', function() {
$table.find('tbody tr').hide().slice(currentPage * numPerPage, (currentPage + 1) * numPerPage).show();
});
$table.trigger('repaginate');
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++) {
$('<div class="page-number clickable"></div>').text(page + 1).bind('click', {
newPage: page
}, function(event) {
currentPage = event.data['newPage'];
$table.trigger('repaginate');
$(this).addClass('active').siblings().removeClass('active');
}).appendTo($pager).addClass('clickable');
}
$pager.insertBefore($table).find('div.page-number:last').addClass('active');
});
I need to show the last page of the table when the document is ready. I already change, on the second last row, the "page-number:first" to "page-number:last".
It works fine, but it's only a visualization trick. In fact, if I have 3 pages, the "3" button is highlighted, but the active page of the table still remains the first.
Is there a way to load directly the last page with this script?
You can view the image:
.
EDIT: Here is the fiddle.
Just add the following line after that code you added and it will be working fine.
$pager.insertBefore($table).find('div.page-number:last').click();