• Calendars
• Date & Time
• Document Effects
• Dynamic Content
• Form Effects
• Games
• Image Effects
• Links & Tooltips
• Menus & Navigation
• Mouse and Cursor
• Scrollers
• Text Animations
• User/System Preference
• Window and Frames
• Other
• XML and RSS

• Script Forums
• Recommend Us
• Usage Terms
• Free JavaScripts

• IE5+: IE 5 and above
• FF1+: Firefox 1.0+. NS6+ and FF beta are assumed as well.
• Opr7+: Opera 7 and above.

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 display plus the selected page- is stored neatly as a JavaScript object for ease of portability. This variable can be manually 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 requested.

Demo:

• 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)

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 calling them.

Directions

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):
  • demo.htm
  • ajaxpagination.css
  • ajaxpagination.js
  • loading.gif
  • Demo files: flower.htm, flower2.htm, flower3.htm, flower4.htm plus images

Setting up the script on your page

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" JavaScript object that contains two properties "pages" and "selectedpage", then call ajaxpageclass.createBook() to display your new Ajax Book!

<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 mybookinstance=new ajaxpageclass.createBook(bookonflowers, "bookcontent", ["paginate-top", "paginate-bottom"])

</script>

The variable "bookonflowers" should be an arbitrary yet unique variable with the following two properties:

1. "pages:" Array that contains the paths to the pages on your server you wish shown (in sequential order)
2. "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).

The entire "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 parameters:

var bookvarinstance=new ajaxpageclass.createBook(settingsvar, "contentDiv_id", ["paginateDiv1_id", "paginateDiv2_id"])

1. "settingsvar": Name of JavaScript object that holds your settings for this Ajax book.
2. "contentDiv_id": ID of DIV that houses the page contents.
3. "[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 instance.

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 more, in common questions and their solutions.

Table Of Contents

This script consists of an index page plus a supplementary page:

• Script Index Page
• Common questions and solutions