Client Side Paging

If anyone of you lukin out for a Client Side implemetation of paging using javascript , try out this.....


Add this in Script section of your page....


function Pager(tableName, itemsPerPage) {
this.tableName = tableName;
this.itemsPerPage = itemsPerPage;
this.currentPage = 1;
this.pages = 0;
this.inited = false;

this.showRecords = function(from, to) {
var rows = document.getElementById(tableName).rows;
// i starts from 1 to skip table header row
for (var i = 1; i < rows.length; i++) {
if (i < from || i > to)
rows[i].style.display = 'none';
else
rows[i].style.display = '';
}
}

this.showPage = function(pageNumber) {

if (! this.inited) {
alert("not inited");
return;
}

if (document.getElementById('next') && pageNumber ==1)
{
var oldPageAnchor = document.getElementById('next');
oldPageAnchor.className = 'pg-normal';
var oldPageAnchor = document.getElementById('prev');
oldPageAnchor.className = '';
}
else if (document.getElementById('prev') && pager.pages > pageNumber)
{
var oldPageAnchor = document.getElementById('prev');
oldPageAnchor.className = 'pg-normal';
var oldPageAnchor = document.getElementById('next');
oldPageAnchor.className = 'pg-normal';

}
if (document.getElementById('next') && pageNumber == pager.pages)
{
var oldPageAnchor = document.getElementById('prev');
oldPageAnchor.className = 'pg-normal';
var oldPageAnchor = document.getElementById('next');
oldPageAnchor.className = '';
}

var oldPageAnchor = document.getElementById('pg'+this.currentPage);
oldPageAnchor.className = 'pg-normal';

this.currentPage = pageNumber;

var newPageAnchor = document.getElementById('pg'+this.currentPage);
newPageAnchor.className = 'pg-selected';

var from = (pageNumber - 1) * itemsPerPage + 1;
var to = from + itemsPerPage - 1;
this.showRecords(from, to);
}

this.prev = function() {
if (this.currentPage > 1)
this.showPage(eval(this.currentPage) - 1);
}

this.next = function() {
if (this.currentPage < this.pages) {
this.showPage(eval(this.currentPage) + 1);
}
}

this.init = function() {
var rows = document.getElementById(tableName).rows;
var records = (rows.length - 1);
this.pages = Math.ceil(records / itemsPerPage);
this.inited = true;
}

this.showPageNav = function(pagerName, positionId) {
if (! this.inited) {
alert("not inited");
return;
}

var element = document.getElementById(positionId);
var pagerHtml;

if (pagerName == "none")
{
pagerHtml = '';
}
else
{
pagerHtml = ' « Prev | ';
for (var page = 1; page <= this.pages; page++)
pagerHtml += '' + page + ' | ';
pagerHtml += ' Next »';
}

element.innerHTML = pagerHtml;
}


}


var pager = new Pager('t1', 15);
pager.init();
if(pager.pages > 1)
{

pager.showPageNav('pager', 'pageNavPosition');
if (pager.pages != 0)
{
if(document.getElementById("pgnum") && document.getElementById("pgnum").value!="")
{
if(document.getElementById("pgnum").value > pager.pages)
{
pager.showPage(pager.pages);
}
else
{
pager.showPage(document.getElementById("pgnum").value);
}
}

else
{
pager.showPage(1);
}
}
}
else
{
pager.showPageNav('none', 'pageNavPosition');
}

and 2 use this in your page add the before div to the end of HTML section of you page, you should create a table for that so that its alignment is proper:

If you like this script, please post ...!