Home Dynamic Content Iframe and Ajax Ajax Pagination Script Developer's View
<html>
<head>
<link rel="stylesheet" type="text/css" href="ajaxpagination.css" />
<script src="ajaxpagination.js" type="text/javascript">
/***********************************************
* Ajax Pagination script- (c) Dynamic Drive DHTML code library
(www.dynamicdrive.com)
* Please keep this notice intact
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/
</script>
</head>
<body>
<ul>
<li><a href="javascript:mybookinstance.refresh(bookonflowers)">Load Flowers Data
Set (4 pages)</a></li>
<li><a href="javascript:mybookinstance.refresh(bookonanimals)">Load Animals Data
Set (3 pages)</a></li>
<li><a href="javascript:mybookinstance.refresh(bookcombo)">Load Large Data Set
(12 pages)</a> (Notice the 4 page range limit within pagination DIV)</li>
</ul>
<div id="paginate-top"> </div>
<div id="bookcontent"> </div>
<div id="paginate-bottom"> </div>
<p><a href="javascript:mybookinstance.selectpage(1)">Select 2nd page
dynamically</a></p>
<script type="text/javascript">
var bookonflowers={
pages: ["demofiles/flower.htm", "demofiles/flower2.htm",
"demofiles/flower3.htm", "demofiles/flower4.htm"],
selectedpage: 0 //set page shown by default (0=1st page)
}
var bookonanimals={
pages: ["demofiles/external.htm", "demofiles/external2.htm",
"demofiles/external3.htm"],
selectedpage: 0 //set page shown by default (0=1st page)
}
var bookcombo={
pages: ["demofiles/flower.htm", "demofiles/flower2.htm",
"demofiles/flower3.htm", "demofiles/flower4.htm", "demofiles/external.htm",
"demofiles/external2.htm", "demofiles/external3.htm", "demofiles/flower.htm",
"demofiles/flower2.htm", "demofiles/flower3.htm", "demofiles/flower4.htm",
"demofiles/external.htm"],
selectedpage: 0 //set page shown by default (0=1st page)
}
var mybookinstance=new ajaxpageclass.createBook(bookonflowers, "bookcontent",
["paginate-top", "paginate-bottom"])
</script>
</body>
</html>