Beginning JavaScript with DOM Scripting and Ajax, 2nd Edition

Chapter 7 ■ JavaScript and User Interaction: Navigation and Forms
pagination.js (excerpt)
if(t == table.topNext || t == table.bottomNext){
start = table.current + pn.increase;
} else if (t == table.topPrev || t == table.bottomPrev){
start = table.current - pn.increase;
}
pn.showSection(table, start);
},
The showSection() method calls the changePaginationNav() method to update the links and the counter and
tests whether there is already a current parameter on the table. If there is one, this means data rows exist that need to
be removed. You get rid of them by looping through the section of the data rows stored in the datarows property and
removing the CSS class defined in showClass().
pagination.js (excerpt)
showSection : function(table, start){
var i;
pn.changePaginationNav(table, start);
if(table.current != null){
for(i=table.current; i < table.current+pn.increase; i++){
if(table.datarows[i]) {
DOMhelp.cssjs('remove', table.datarows[i], pn.showClass);
}
}
}
You then loop from start to start plus the predefined increase, and you add the CSS class to show these rows
in the table. Notice that you need to test whether these rows exist; otherwise, you might try to reach rows that aren’t
there on the last page. (Imagine a list of 22 elements; clicking the “next” link on the 16–20 page would try to show
elements 21 to 25.) To make sure the right slice gets shown the next time the method gets called, all that is left is to
define the current property as the start value.
pagination.js (excerpt)
for(i = start; i < start + pn.increase; i++){
if(table.datarows[i]) {
DOMhelp.cssjs('add', table.datarows[i], pn.showClass);
}
}
table.current = start;
},
As hinted earlier, the changePaginationNav() method renders the “previous” link on the first page and the “next”
link on the last page inactive. The trick to making links appear but not clickable is to remove the href attribute.
On the first page, the start value minus the predefined increase would result in a negative number, which is easy
to test. When the number is larger than 0, you add the href attribute again.
www.it-ebooks.info
223