include the javascript using <script src="pager.js"> in your page header;
include a small css to skin the page navigation-bar (i.e. for emphasizing the selected page using bold and underline style);
define an ID on the table you want to scroll. i.e. <table id="results"> ;
place an empty <div/> in the place you want to display the navigation bar. i.e. <div id="pageNavPosition"> ;
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.
Learn, share, save
Discover and save your favorite ideas. Come back to expert answers, step-by-step guides, recent topics, and more.