Write sample code for pagination using java script.

Answers were Sorted based on User's Feedback



Write sample code for pagination using java script. ..

Answer / sonylal

To use my javascript you need to:

1. include the javascript using <script src="pager.js">
in your page header;
2. include a small css to skin the page navigation-bar
(i.e. for emphasizing the selected page using bold and
underline style);
3. define an ID on the table you want to scroll. i.e.
<table id="results"> ;
4. place an empty <div/> in the place you want to display
the navigation bar. i.e. <div id="pageNavPosition"> ;
5. include an initialization script at the bottom of your
page like this:

<script type="text/javascript"><!--
var pager = new Pager('results', 3);
pager.init();
pager.showPageNav('pager', 'pageNavPosition');
pager.showPage(1);
//--></script>

Where 'results' is the id of the table (see step #3), 3 is
the number of records per page, 'pager' is the name of the
variable (in red... that's ugly I agree...), and
pageNavPosition is the ID of the DIV inside of which the
pagination bar will be placed. The showPage(1) indicates
that, when loading the page, the 1st one should be displayed.


Regards
www.jobpuja.com

Is This Answer Correct ?    47 Yes 28 No

Write sample code for pagination using java script. ..

Answer / jayanthi

<script type="text/javascript"><!--
var pager = new Pager('results', 3);
pager.init();
pager.showPageNav('pager', 'pageNavPosition');
pager.showPage(1);
//--></script>

Is This Answer Correct ?    26 Yes 9 No

Write sample code for pagination using java script. ..

Answer / 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"> &#171 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 &#187;</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

More JavaScript Interview Questions

What is the best site to learn javascript?

0 Answers  


What are escape characters in javascript?

0 Answers  


what are the difference unescape() and escape() functions?

0 Answers  


How javascript sort function works?

0 Answers  


What is the difference between an Anonymous Function and a named function?

0 Answers  


What are parameters in javascript?

0 Answers  


What is difference between array.splice() and array.slice() method in javascript?

0 Answers  


Should I learn java first or javascript?

0 Answers  


Explain function hoisting in javascript?

0 Answers  


How and where javascript namespacing is used?

0 Answers  


How to create an array in javascript?

0 Answers  


List some design patterns in javascript?

0 Answers  


Categories