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
- The settings for each Ajax Pagination instance- a list of files to
defined or dynamically written out based on information returned from
the sever, such as via PHP/ MySQL.
- 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
Select 2nd page dynamically
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
To add this script to your page, just download
"ajaxpagination.zip", and refer to "demo.htm"
inside for the full source code:
Setting up the script on your pageIntegrating this
script on to your page is very straightforward. After having added the
.css file 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",
selectedpage: 0 //set page shown by default (0=1st page)
var mybookinstance=new ajaxpageclass.createBook(bookonflowers, "bookcontent",
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
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"])
your settings for this Ajax book.
contentDiv_id": ID of DIV that houses the page
[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:
On the next page we look at this in more
detail, plus how to dynamically write out the "settings" variable and
common questions and their solutions.
This script consists of an index page plus a supplementary page: