Write sample code for pagination using java script.
Answer Posted / devendra kumar
<script type="text/javascript"><!--
var pager = new Pager('results',30);
pager.init();
pager.showPageNav('pager', 'pageNavPosition');
pager.showPage(1);
//-->
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;
}
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(this.currentPage - 1);
}
this.next = function() {
if (this.currentPage < this.pages) {
this.showPage(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 = '<span onclick="' + pagerName +
'.prev();" class="pg-normal"> « Prev </span> | ';
for (var page = 1; page <= this.pages; page++)
pagerHtml += '<span id="pg' + page + '"
class="pg-normal" onclick="' + pagerName + '.showPage(' +
page + ');">' + page + '</span> | ';
pagerHtml += '<span onclick="'+pagerName+'.next();"
class="pg-normal"> Next »</span>';
element.innerHTML = pagerHtml;
}
}
</script>
<style type="text/css">
.pg-normal {
color: black;
font-weight: normal;
text-decoration: none;
cursor: pointer;
}
.pg-selected {
color: black;
font-weight: bold;
text-decoration: underline;
cursor: pointer;
}
.style4 {font-weight: bold}
</style>
<table>
<tr>
<td width="500" align="left"
valign="top" height="20"><div id="pageNavPosition"></div></td>
</tr></table>
<table id="results">Data....</table>
Is This Answer Correct ? | 11 Yes | 6 No |
Post New Answer View All Answers
What are screen objects?
What does clean white space mean?
What is the difference between childNode and children?
what data type javascript supports?
How can you do a character count in javascript?
How do you organize your JavaScript code?
Some XYZ company is arranging for online aptitude tests. Draw detailed E-R diagram for the same..
How do you trim in javascript?
What does the "Access is Denied" IE error mean?
How much do javascript programmers make?
What is === in javascript?
How Does Function Hoisting Work in JavaScript?
Why javascript is so popular?
why we calld java object orinted programming language??
What is the scope of variables in JavaScript?