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 are events in javascript?

0 Answers  


What is console.time() and console.timeend()? What is its syntax, and why is it used?

0 Answers  


What are the main functions performed by javascript statements?

0 Answers  


How we can get the value of an element using javascript?

0 Answers  


Name the two functions that are used to create an HTML element dynamically?

0 Answers  






What is the use of Push method in JavaScript?

0 Answers  


Hello Friends !!! I am RAJAT AGRAWAL, All Saints' College of Technology, Bhopal ( M.P. ) I just want to share my experience of getting placed at Consagous Technologies. On 9th June 2012 there was an close campus drive of Consagous Technologies in our college. I was very excited to take part in it. Firstly, they started with a seminar, a small introduction about the company. Then the placement process started. The recruitment process of Consagous had three rounds. 1. Written test 2. Group discussion 3. Technical interview & HR Interview Written Test : It was objective type with 50 questions in 60 mins. The written test paper had three sets set A , set B and set C. I got set B. Basically the question were from network connection with database ,output of programs on C, C++, java, asp.net, php , data structure and Aptitude questions included topics like Time & Distance, simple interest ,average, Percentage, Ratio & Proportion etc.There was no negative marking in the written test. Some of them which I remember are- 1. What command in UNIX run on backgroung. 2. The groups of students are divided into 2class room. If 10students are shifted from class A to Class B then no of students in both class are equal. If 10 Students are shifted from class B to Class A then no of students in class A is Double to the no of students in Class B. Find the total no of students? 3. The time taken by boat to travel 4 meters dowmstream is 4 hours 48 min and that the upstream 4 hours .Find the speed of the boat in still water and the speed of the stream. 4. And many more…. Then after few hours the result of written test was announced , and fortunately I was selected among the 80- 100 other students. After written test 21 students were shortlisted and went through 2nd round . GD Round: In this round , all 21 students divided into two teams and went through group discussion process. Topic of our GD was “Spirituality and Technology” and it held for 15 to 20 min. It was the very nice discussion and most of them took part in it. After GD round 11 students were shortlisted. Then the next round was Technical and HR interview. HR and Technical Interview: Finally after 2nd Round I had been selected for HR and Technical Interview Round .At that time also I was full of excitement for my PI , though nervous also. I just prayed to God , took my parents name and entered in the room, As I entered I saw three people there inside the room I wished all of them, and they offered me the chair, I replied with thank you sir thank you mam. HR questions: • Introduce yourself • Why u want to be a software engineer? • why u want to join consagous? • Why do we take you in consagous? • Tell me 5 negative points of your's? • Tell me the name of CEO of Google, Facebook? Technical question: • what is object –oriented programming? • Tell me about your major project? • Features of OOPS n Advantage of Oops? • Difference between Router $ Switch? And many more…… All you have to be confident and have positive attitude during the interview. Really it was a very good experience with HR sir and with his team. And just after half an hour the results had been declared , 5 students were selected and fortunately with God Grace I was one of them, that was one of the most cherishable moment of my life. After that we have a photograph with HR Sir & CEO Sir. I always remember one thing We Will..... Do It...........!!!!! I would like to thank Consagous Technologies to give me such a big opportunity to work with them,thank you so much.!

0 Answers   Consagous,


How do I use javascript to password-protect my web site?

0 Answers  


What is missing in my code? function numberTally(numList) { var evenTotal = 0; var oddTotal = 0; for (var i = 0; i <= numList.length; i++) { if i % 2 { // i is odd oddTotal += numList[i]; // or oddTotal = oddTotal + numList[i]; } else { // i is even evenTotal + numList[i]; } } alert(oddTotal); return evenTotal; }

0 Answers  


How do you access an element in an HTML document with JavaScript?

0 Answers  


What is a reverse string?

0 Answers  


What are the main uses of javascript?

0 Answers  


Categories