Beginning JavaScript with DOM Scripting and Ajax, 2nd Edition

Chapter 7 ■ JavaScript and User Interaction: Navigation and Forms
Apply the dynamic class to the table and thus hide all the table rows. Call the createPaginationNav() method
with a reference to the current table as a parameter to add the “previous” and “next” links, and call showSection()
with the table reference and 0 as parameters to show the first result set.
pagination.js (excerpt)
DOMhelp.cssjs('add', ts[i], pn.dynamicClass);
pn.createPaginationNav(ts[i]);
pn.showSection(ts[i], 0);
}
},
The createPaginationNav() method does not contain any surprises; all it does is create the links and the
counter and add the event handlers pointing to the navigate() method. You start by creating a new paragraph
element and adding the pagination menu class to it.
pagination.js (excerpt)
createPaginationNav : function(table){
var navBefore, navAfter;
navBefore = document.createElement('p');
DOMhelp.cssjs('add', navBefore, pn.paginationMenuClass);
Add a new link to the paragraph with the previousLabel property value as the text content and a new SPAN
element that will display the number of the current result set in between the “previous” and “next” links. You preset
the counter with 1 as the start value, the number of elements shown on each page as defined in pn.increase as the
end value, and the number of all data rows as the total number. The last element to add to the new paragraph is the
“next” link. You add the new paragraph immediately before the table via parentNode and insertBefore().
pagination.js (excerpt)
navBefore.appendChild(DOMhelp.createLink('#', pn.previousLabel));
navBefore.appendChild(document.createElement('span'));
counter=pn.counter.replace('_x_', 1);
counter=counter.replace('_y_', pn.increase);
counter=counter.replace('_z_', table.datarowsize-1);
navBefore.getElementsByTagName('span')[0].innerHTML = counter;
navBefore.appendChild(DOMhelp.createLink('#', pn.nextLabel));
table.parentNode.insertBefore(navBefore, table);
It would be good to show the same menu below the table as well. Instead of re-creating all these elements
once more, it is enough to clone the paragraph and insert it after the table via parentNode, insertBefore(), and
nextSibling. Then store the “previous” and “next” links of each paragraph as their own table properties to make it
easier to change them in other methods.
pagination.js (excerpt)
navAfter = navBefore.cloneNode(true);
table.parentNode.insertBefore(navAfter, table.nextSibling);
table.topPrev = navBefore.getElementsByTagName('a')[0];
table.topNext = navBefore.getElementsByTagName('a')[1];
table.bottomPrev = navAfter.getElementsByTagName('a')[0];
table.bottomNext = navAfter.getElementsByTagName('a')[1];
www.it-ebooks.info
221