In either case, it does the job and is very helpful. Thanks for sharing.

i need “<>” implementation in this same pagination . First should come before Previous link and Last should come after Next link. can anyone help ….

Thanks in advance.

There is a slight change to init. Here it is:

var pager = new Pager('panel', 10);
pager.init();
pager.showPageNav('pager', 'pageNavPosition', 1);
pager.showPage(1);


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

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 to)
rows[i].style.display = 'none';
else
rows[i].style.display = '';
}
}

this.showPage = function(pageNumber) {
if (! this.inited) {
alert("not inited");
return;
}

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);

if (pageNumber == 1) {
document.getElementById('prev').style.display = 'none';
} else {
document.getElementById('prev').style.display = 'block';
}

if (pageNumber == this.pages) {
document.getElementById('next').style.display = 'none';
} else {
document.getElementById('next').style.display = 'block';
}

this.showPageNav(this.pageName, this.positionId, pageNumber);
}

this.prev = function() {
if (this.currentPage > 1) {
this.showPage(this.currentPage - 1);
this.showPageNav(this.pageName, this.positionId, this.currentPage);
}
}

this.next = function() {
if (this.currentPage < this.pages) {
this.showPage(this.currentPage 1);
this.showPageNav(this.pageName, this.positionId, this.currentPage);
}
}

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, position) {
if (!this.inited) {
alert("not inited");
return;
}
this.pageName = pagerName;
this.positionId = positionId;

var pagerHtml = ' &#171 Prev | ';
if (position > 6) {
pagerHtml = '... | ';
}
for (var page = (position - 5 > 0 ? position - 5 : 1); page this.pages ? this.pages : position 6); page ) {
pagerHtml = '' page ' | ';
}
if (position 5 < this.pages) {
pagerHtml = '... | ';
}
pagerHtml = ' Next »';

document.getElementById(positionId).innerHTML = pagerHtml;
}
}

And please let me know If I use your work, how may I attribute it to you. Will mentioning you blog name be good enough ?