FooTable is a fantastic jQuery plugin that create searchable, sortable, responsive and themeable tables. When I began using FooTable it handled large amounts of data swiftly, but did not paginate. The software was written in a very extendable fashion so I submitted a pull request with the pagination plugin and demo, and received a thanks @awc737. I highly recommend FooTable for the easiest dynamic and responsive HTML and JavaScript tables.
(function($, w, undefined) {
if (w.footable == undefined || w.footable == null)
throw new Error('Please check and make sure footable.js is included in the page and is loaded prior to this script.');
var defaults = {
paginate: true,
increment: 10,
navigation: '.footable-nav'
}
function Paginate() {
var p = this;
p.name = 'Footable Paginate';
p.pages = [];
p.currentPage = 0;
p.init = function(ft) {
if(ft.options.paginate == true) {
$(ft.table).bind({
'footable_initialized': function(e) {
var $table = $(e.ft.table), $tbody = $table.find('> tbody');
p.input = $table.data('nav') || e.ft.options.navigation;
var pageCount = 1;
var rowCount = pageCount * ft.options.increment;
var page = [];
var lastPage = [];
$.each(p.rows(ft, $tbody), function(i, row) {
page.push(row);
if (i === rowCount - 1){
p.pages.push(page);
pageCount++;
rowCount = pageCount * ft.options.increment;
page = [];
} else if (i >= p.rows(ft, $tbody).length - (p.rows(ft, $tbody).length % ft.options.increment)) {
lastPage.push(row);
}
});
p.pages.push(lastPage);
p.navigate(ft, $tbody);
p.fillPage(ft, $tbody, 0);
$('.footable-sortable').on('click', function(e){
p.fillPage(ft, $tbody, p.currentPage);
});
}
});
}
};
p.rows = function(ft, tbody) {
var rows = [];
var i = 1;
tbody.find('> tr').each(function() {
rows.push(this);
$(this).attr('data-order', i);
i++;
});
return rows;
};
p.navigate = function(ft, tbody) {
if (p.pages.length > 0) {
var element = $(p.input);
element.append('<li class="arrow"><a href="#prev">«</a></li>');
$.each(p.pages, function(i, page){
if (page.length > 0) {
element.append('<li class="page"><a href="#">' + (i + 1) + '</a></li>');
}
});
element.append('<li class="arrow"><a href="#next">»</a></li>');
}
$(p.input + ' a').on('click', function(e) {
e.preventDefault();
if ($(this).attr('href') == '#prev') {
if (p.currentPage > 0){
p.fillPage(ft, tbody, p.currentPage - 1);
}
} else if ($(this).attr('href') == '#next') {
if (p.currentPage < p.pages.length - 2){
p.fillPage(ft, tbody, p.currentPage + 1);
}
} else {
if (p.currentPage != ($(this).html() - 1)) {
p.fillPage(ft, tbody, $(this).html() - 1);
}
}
$(p.input + ' li').removeClass('current');
$(p.input + ' li.page:eq(' + p.currentPage + ')').addClass('current');
});
$(p.input + ' li.page:eq(' + p.currentPage + ')').addClass('current');
};
p.clear = function(ft, tbody) {
tbody.find('> tr').each(function() {
$(this).hide();
});
};
p.fillPage = function(ft, tbody, pageNumber) {
p.clear(ft, tbody);
p.currentPage = pageNumber;
$.each(p.pages[pageNumber], function(i, row) {
tbody.find('> tr:nth-child(' + ( i + (ft.options.increment * pageNumber + 1) ) + ')').show();
});
};
};
w.footable.plugins.register(new Paginate(), defaults);
})(jQuery, window);