This plugin is written in jQuery and is made to support the codeigniter framework. It is an ajax powered table pagination plugin designed to provide only that. You should be able to use almost any other table scripts with this plugin.
(function($){
$.fn.extend({
tpaginate: function(options) {
//Settings list and the default values
var defaults = {
page: 0,
url : null,
rows: 20,
nodata: 'The table is empty!',
actions: true
};
var table;
var foot;
var body;
var curpagespan;
var totpagespan;
var oldbody;
var replaced = false;
var options = $.extend(defaults, options);
return this.each(function() {
table = this;
foot = $(table).find(' > tfoot > tr > td');
body = $(table).find(' > tbody');
create_footer(foot);
curpagespan = foot.find(' > #table_pagecount > span#page');
totpagespan = foot.find(' > #table_pagecount > span#page_total');
curpagespan.html(0);
totpagespan.html(0);
$('#searchButton').click(function(){
var term = $('#search').val();
if(term.length >= 3){
if(replaced)
load_data(1, term, true, false);
else
load_data(1, term, true, true);
}
});
$('#search').keyup(function(){
if($(this).val() == ''){
create_tbody(false, false, true);
}
});
});
function create_footer() {
var pagecount = $('<div id="table_pagecount">Page <span id="page"></span> of <span id="page_total"></span></div>');
var pager = $('<div id="table_pageination"><a class="link" id="first" style="display:none;">First</a><a class="link" id="prev" style="display:none;">Prev</a><span id="pages"></span><a class="link" id="next" style="display:none;">Next</a><a class="link" id="last" style="display:none;">Last</a></div>');
foot.append(pagecount);
foot.append(pager);
load_data(1, '', true);
}
function current_page(page){
curpagespan.html(page);
}
function total_page(page){
totpagespan.html(Math.ceil(page/options.rows));
}
function load_data(page, search, action, save){
if(save == null)
save = false;
else
save = true;
$('#table_pageination a.link').unbind('click');
search = (search == null ? '' : search);
var start = (page-1)*options.rows;
if(page == 1)
start = 0;
var url = options.url+'/'+start+'/'+action+'/'+search;
$.ajax({
url: url,
success: function(data) {
if(data.total != 0){
current_page(page);
total_page(data.total);
create_tbody(data.members, save);
update_pages(page, Math.ceil(data.total/options.rows));
} else{
current_page(0);
total_page(0);
foot.find(' > #table_pageination > #pages').html('<a class="link">0</a>');
var newtr = $('<tr></tr>');
var newtd = $('<td style="font-weight:bold;text-align: center;"></td>').attr('colspan', foot.attr('colspan')).text(options.nodata);
body.html(newtr.append(newtd));
}
}
});
}
function create_tbody(rows, save, revert){
if(save == true){
oldbody = body.html();
replaced = true;
}
var newbody = $('<tbody />');
if(revert == null){
for(var i in rows){
var row = $('<tr />');
for(var j in rows[i]){
if(j != 'id' && j != 'actions')
row.append('<td class="'+j+'td">'+(rows[i][j] == null ? '' : rows[i][j])+'</td>');
if(j == 'actions' && rows[i][j] != null && options.actions)
row.append(rows[i][j]);
}
newbody.append(row);
}
} else{
newbody.html(oldbody);
replaced = false;
}
body.html(newbody.html());
$(table).trigger("update");
}
function update_pages(page, total){
foot.find(' > #table_pageination > #pages').html(ranger(page, 5, total));
if(page == 1){
foot.find(' > #table_pageination > a#first').fadeOut('slow');
foot.find(' > #table_pageination > a#prev').fadeOut('slow');
} else{
foot.find(' > #table_pageination > a#first').attr('rel', 1).fadeIn('slow');
if(page != 2)
foot.find(' > #table_pageination > a#prev').attr('rel', page-1).fadeIn('slow');
}
if(total != page){
foot.find(' > #table_pageination > a#last').attr('rel', total).fadeIn('slow');
if(total != page+1)
foot.find(' > #table_pageination > a#next').attr('rel', ++page).fadeIn('slow');
} else{
foot.find(' > #table_pageination > a#last').attr('rel', total).fadeOut('slow');
foot.find(' > #table_pageination > a#next').attr('rel', total).fadeOut('slow');
}
$('#table_pageination a.link').click(function(){
replaced = false;
load_data($(this).attr('rel'), '', true);
});
}
function ranger(num, range, max) {
var left = num*1;
var right = num*1;
while (right - left < range * 2) {
if (right + 1 <= max)
right++;
if (left - 1 > 0)
left--;
if (right == max && left == 1)
break;
}
var str = '';
for (var i = left; i <= right; i++) {
if(i != num)
str += '<a class="link" rel="'+i+'">'+i+'</a>';
if(i == num)
str += '<a rel="nolink">'+i+'</a>';
}
return str;
}
}
});
})(jQuery);
===) may lead to subtle bugs. Not usinghasOwnPropertyin afor inis bad practice. Both of these combined will lead to bugs when native prototypes have been extended (e.g. increate_tbody). There might also be some leakage from the closures of the event handlers but I'm not sure how much of an issue that would be without digging further into the code. Overall structure looks good but many small changes could be made, gonna post something later \$\endgroup\$$(table).tpaginate({rows: 200});and Yes, I agree users hate pagination, So Do I, but with 60k rows, sometimes it is necessary! \$\endgroup\$#prev), there is a high likelihood of unintended conflict with pre-existing markup. \$\endgroup\$