Add ajax level pagination with tablesorter jquery plugin pager - php

Question

I have a table in which I want to implement server side pagination.
Currently what I am doing is I am fetching entire data in one go (40-50k records) and assigning it to an array ($batchesData) and I have implemented a pager plugin of the jquery table sorter on it which is technically wrong because it slows down the system.
I want to implement server side pagination wherein only 10 records per page are fetched and displayed with this library but need some leads on how to proceed
This is how my tpl file looks like
<table class="table table-striped projects tablesorter"
id="batchTable" style="font-size: 13px;">
<th>
.....
.....
</th>
<tbody>
{if !empty($batchesData)}
{foreach from = $batchesData key = filter item = value}
<tr>
......
......
</tr>
{/foreach}
</tbody>
</table>
Pager code
<div style = "margin-left:30%" id="pager" class="tablesorterPager" >
<form>
<img src="/assets/images/first.png" width = "5%" height = "auto" class="first"/>
<img src="/assets/images/previous.png" width = "5%" height = "auto" class="prev"/>
<input type="text" class="pagedisplay"/>
<img src="/assets/images/next.png" width = "5%" height = "auto" class="next"/>
<img src="/assets/images/last.png" width = "5%" height = "auto" class="last"/>
<select class="pagesize">
<option selected="selected" value="10">10</option>
<option value="5">5 per page</option>
<option value="50">50 per page</option>
<option value="100">100 per page</option>
</select>
</form>
</div>
Js Code
/**
* To sort table columns in asc/desc order in Batch Listing View
*/
$('#batchTable')
.tablesorter({widthFixed: true, widgets: ['zebra']}) ;
/**
* To apply pagination in Batch Listing View
*/
$('#batchTable')
.tablesorterPager({container: $("#pager")});
Any leads would be highly appreciated
pager.js
(function($) {
$.extend({
tablesorterPager: new function() {
function updatePageDisplay(c) {
var s = $(c.cssPageDisplay,c.container).val((c.page+1) + c.seperator + c.totalPages);
}
function setPageSize(table,size) {
var c = table.config;
c.size = size;
c.totalPages = Math.ceil(c.totalRows / c.size);
c.pagerPositionSet = false;
moveToPage(table);
fixPosition(table);
}
function fixPosition(table) {
var c = table.config;
if(!c.pagerPositionSet && c.positionFixed) {
var c = table.config, o = $(table);
if(o.offset) {
c.container.css({
position: 'realtive'
});
}
c.pagerPositionSet = true;
}
}
function moveToFirstPage(table) {
var c = table.config;
c.page = 0;
moveToPage(table);
}
function moveToLastPage(table) {
var c = table.config;
c.page = (c.totalPages-1);
moveToPage(table);
}
function moveToNextPage(table) {
var c = table.config;
c.page++;
if(c.page >= (c.totalPages-1)) {
c.page = (c.totalPages-1);
}
moveToPage(table);
}
function moveToPrevPage(table) {
var c = table.config;
c.page--;
if(c.page <= 0) {
c.page = 0;
}
moveToPage(table);
}
function moveToPage(table) {
var c = table.config;
if(c.page < 0 || c.page > (c.totalPages-1)) {
c.page = 0;
}
renderTable(table,c.rowsCopy);
}
function renderTable(table,rows) {
var c = table.config;
var l = rows.length;
var s = (c.page * c.size);
var e = (s + c.size);
if(e > rows.length ) {
e = rows.length;
}
var tableBody = $(table.tBodies[0]);
// clear the table body
$.tablesorter.clearTableBody(table);
for(var i = s; i < e; i++) {
//tableBody.append(rows[i]);
var o = rows[i];
var l = o.length;
for(var j=0; j < l; j++) {
tableBody[0].appendChild(o[j]);
}
}
fixPosition(table,tableBody);
$(table).trigger("applyWidgets");
if( c.page >= c.totalPages ) {
moveToLastPage(table);
}
updatePageDisplay(c);
}
this.appender = function(table,rows) {
var c = table.config;
c.rowsCopy = rows;
c.totalRows = rows.length;
c.totalPages = Math.ceil(c.totalRows / c.size);
renderTable(table,rows);
};
this.defaults = {
size: 10,
offset: 0,
page: 0,
totalRows: 0,
totalPages: 0,
container: null,
cssNext: '.next',
cssPrev: '.prev',
cssFirst: '.first',
cssLast: '.last',
cssPageDisplay: '.pagedisplay',
cssPageSize: '.pagesize',
seperator: "/",
positionFixed: true,
appender: this.appender
};
this.construct = function(settings) {
return this.each(function() {
config = $.extend(this.config, $.tablesorterPager.defaults, settings);
var table = this, pager = config.container;
$(this).trigger("appendCache");
config.size = parseInt($(".pagesize",pager).val());
$(config.cssFirst,pager).click(function() {
moveToFirstPage(table);
return false;
});
$(config.cssNext,pager).click(function() {
moveToNextPage(table);
return false;
});
$(config.cssPrev,pager).click(function() {
moveToPrevPage(table);
return false;
});
$(config.cssLast,pager).click(function() {
moveToLastPage(table);
return false;
});
$(config.cssPageSize,pager).change(function() {
setPageSize(table,parseInt($(this).val()));
return false;
});
});
};
}
});
// extend plugin scope
$.fn.extend({
tablesorterPager: $.tablesorterPager.construct
});
})(jQuery);
Library Used - http://tablesorter.com/docs/
http://tablesorter.com/docs/example-pager.html