QuestionAsk Questions?
Lakshmi
How to set pagination using java script to display data
View Answers
April 29, 2011 at 4:52 PM
1)page.jsp:
<html>
<head>
<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;
}
</style>
<script type="text/javascript" src="pagination.js"></script>
</head>
<form action="" method="get" >
<table border="1" id="results">
<tr><th>Name</th><th>Address</th><th>Contact No</th></tr>
<tr><td>A</td><td>Delhi</td><td>1111111111</td></tr>
<tr><td>B</td><td>Mumbai</td><td>2222222222</td></tr>
<tr><td>C</td><td>Kolkata</td><td>3333333333</td></tr>
<tr><td>D</td><td>Chennai</td><td>4444444444</td></tr> <tr><td>E</td><td>Hyderabad</td><td>5555555555</td></tr>
<tr><td>F</td><td>Pune</td><td>6666666666</td></tr>
<tr><td>G</td><td>Agra</td><td>7777777777</td></tr>
<tr><td>H</td><td>Chandigarh</td><td>8888888888</td></tr>
<tr><td>I</td><td>Bangalore</td><td>9999999999</td></tr>
<tr><td>J</td><td>Lucknow</td><td>1010101010</td></tr>
</table>
<div id="pageNavPosition"></div>
</form>
<script type="text/javascript"><!--
var pager = new Pager('results', 2, 'pager', 'pageNavPosition');
pager.init();
pager.showPage(1);
</script>
</html>
April 29, 2011 at 4:53 PM
continue..
2)pagination.js:
function Pager(tableName, itemsPerPage, pagerName, positionId) {
this.tableName = tableName;
this.itemsPerPage = itemsPerPage;
this.pagerName = pagerName;
this.positionId = positionId;
this.currentPage = 1;
this.pages = 0;
this.inited = false;
this.numbers = new Array(10);
this.showRecords = function (from, to) {
var table = document.getElementById(tableName);
var rows = table.rows;
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 (this.isRedrawNeeded(pageNumber)) {
var startPage = Math.floor((pageNumber - 1) * 0.1) * 10;
this.showPageNav(startPage + 1);
}
var oldPageAnchor = document.getElementById(this.pagerName + 'pg' + this.currentPage);
if (oldPageAnchor != null) {
oldPageAnchor.className = 'pg-normal';
}
this.currentPage = pageNumber;
var newPageAnchor = document.getElementById(this.pagerName + 'pg' + this.currentPage);
if (newPageAnchor != null) {
newPageAnchor.className = 'pg-selected';
}
var from = (pageNumber - 1) * itemsPerPage + 1;
var to = from + itemsPerPage - 1;
this.showRecords(from, to);
var pgNext = document.getElementById(this.pagerName + 'pgNext');
var pgPrev = document.getElementById(this.pagerName + 'pgPrev');
if (pgNext != null) {
if (this.currentPage == this.pages) pgNext.style.display = 'none';
else pgNext.style.display = '';
}
if (pgPrev != null) {
if (this.currentPage == 1) pgPrev.style.display = 'none';
else pgPrev.style.display = '';
}
}
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.isRedrawNeeded = function (pageNumber) {
for (var i = 0; i < this.numbers.length; i++) {
if (this.numbers[i] == pageNumber) {
return false;
}
}
return true;
}
April 29, 2011 at 4:54 PM
part of pagination.js:
continue.......
this.showPageNav = function (start) {
if (!this.inited) {
alert("not inited");
return;
}
var element = document.getElementById(this.positionId);
var loopEnd = start + 9;
var index = 0;
this.numbers = new Array(10);
var pagerHtml = ' ';
if (this.pages > 2) {
pagerHtml += '<span id="' + this.pagerName + 'pgPrev" onclick="' + this.pagerName + '.prev();" class="pg-normal"> << Prev </span>';
}
for (var page = start; page <= loopEnd; page++) {
if (page > this.pages) {
break;
}
this.numbers[index] = page;
pagerHtml += '<span id="' + this.pagerName + 'pg' + page + '" class="pg-normal" onclick="' + this.pagerName + '.showPage(' + page + ');">' + page + '</span>';
if (page != loopEnd) {
pagerHtml += ' ';
}
index++;
}
page--;
if (this.pages > page) {
pagerHtml += '<span class="regularDataBlue">...</span>';
}
pagerHtml += '<span id="' + this.pagerName + 'pgNext" onclick="' + this.pagerName + '.next();" class="pg-normal"> Next >></span>';
element.innerHTML = pagerHtml;
}
}
Related Pages:
If you are facing any programming issue, such as compilation errors or not able to find the code you are looking for.
Ask your questions, our development team will try to give answers to your questions.
Tutorial Topics
