Ajax Pagination script v1.2.2
Note: Updated: Dec 1st, 08 to v1.2.2 See changelog for full details.
Description: This script lets you include content from multiple pages and display them on demand, using Ajax. Pagination links are automatically created, with each page downloaded only when requested (speeding up delivery and saving on bandwidth. An overview of this script now:
- Each page within the paginated content is fetched individually and only when requested for sake of efficiency.
- The pagination DIV for each Ajax Pagination instance can be positioned anywhere and duplicated multiple times on the page, such as having both a top and bottom pagination DIV.
- You can limit the range of the visible pagination links shown, incremented automatically. This is very useful for Ajax Pagination instances with a lot of pages. v1.2
- Each Ajax Pagination instance can be refreshed with new content by feeding a new settings variable to it on the fly, with the pagination links updated automatically to match.
- Session only persistence enabled by default to persist the last page user viewed when navigating away then returning to the webpage containing the script. v1.2
This script is ideal for showing multi-page content such as "user comments" without reloading the rest of the page each time a comment page is requested.
- Load Flowers Data Set (4 pages)
- Load Animals Data Set (3 pages)
- Load Large Data Set (12 pages) (Notice the 4 page range limit within pagination DIV)
Note: Due to security limitations, the external pages to be shown by this script must all be from the same domain as the primary page calling them.
To add this script to your page, just download "ajaxpagination.zip", and refer to "demo.htm" inside for the full source code:
- ajaxpagination.zip (consists of the below files):
Setting up the script on your pageIntegrating this script on to your page is very straightforward. After having added the
.cssfile references to the HEAD section of your page, proceed with the following:
Step 1: Define an empty DIV on the page to hold the paginated content, plus one or more DIVs as desired for the pagination interface. Be sure each DIV contains its own unique ID:
<div id="paginate-top"> </div>
<div id="bookcontent"> </div>
<div id="paginate-bottom"> </div>
In this case, I'm defining two pagination DIVs, one on top and one beneath the paginated content itself. You can have as many or as few pagination DIVs as desired and positioned anywhere on the page.
Step 2: Following the DIV tags, define your "settings"
pages" and "
ajaxpageclass.createBook() to display your new Ajax Book!
pages: ["demofiles/flower.htm", "demofiles/flower2.htm", "demofiles/flower3.htm", "demofiles/flower4.htm"],
selectedpage: 0 //set page shown by default (0=1st page)
var mybookinstance=new ajaxpageclass.createBook(bookonflowers, "bookcontent", ["paginate-top", "paginate-bottom"])
The variable "
bookonflowers" should be an arbitrary
variable with the following two properties:
pages:" Array that contains the paths to the pages on your server you wish shown (in sequential order)
selectedpage:" Property that contains an integer dictating which page to be shown by default when the page loads (0=1st page, 1=2nd page etc).
"settings" variable can either by manually defined or dynamically output (more info
at "Common questions and solutions").
Following this variable, call
ajaxpageclass.createBook() to tie
everything together and display your Ajax book. This method should be passed 3
var bookvarinstance=new ajaxpageclass.createBook(settingsvar, "contentDiv_id", ["paginateDiv1_id", "paginateDiv2_id"])
contentDiv_id": ID of DIV that houses the page contents.
[paginateDiv1_id, paginateDiv2_id, etc]": Array containing ID(s) of one or more DIVs on your page to contain the pagination links in. Separate each ID with a semicolon (if more than 1).
Finally, make sure the variable "
bookvarinstance" is an
arbitrary but unique variable name to reference this Ajax Pagination
Refreshing Ajax Pagination instance with new data
You can refresh the paginated content even after it initially
loads with new content, by calling its
refresh() method and
passing in either a modified or new "settings" variable:
Table Of Contents
This script consists of an index page plus a supplementary page: