Submit FAQs Awards Usage Terms Contact
Categories
Partners
DaniWeb is an exciting community for web developers, Internet marketers, and technology enthusiasts.
Other Sections
Compatibility
  • IE5+: IE 5 and above
  • FF1+: Firefox 1.0+. NS6+ and FF beta are assumed as well.
  • Opr7+: Opera 7 and above.
Bookmark online:
FF1+ IE5.5+ Opr8+

Ajax Pagination script

Author: Dynamic Drive

Description: This script lets you draw 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:

  • The pagination interface for each Ajax Pagination instance is "free floating", meaning it can be positioned anywhere on the page and repeated multiple times as well.
  • Each page within the paginated content is fetched individually and only when requested for sake of efficiency.
  • The settings for each Ajax Pagination instance is stored neatly in a variable object for ease of portability. This variable can be manually defined or easily dynamically written out based on information returned from the sever, such as via PHP/ MySQL.
  • The entire paginated content can be refreshed with new data on demand, with the pagination links updated automatically as well.

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 (default)  Load Animals Data Set

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 Developer's View

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 page

Integrating this script on to your page is very straightforward. After having added the .js and .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="pcontent"> </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 an arbitrary settingsvar variable in the following format to contain the settings for this particular Pagination instance, to dictate the pages to show and the page selected by default:

<script type="text/javascript">

var myajaxbook={} //arbitrary variable to hold page settings for this book
myajaxbook.page=["external.htm", "external2.htm", "external3.htm", "external4.htm"]
myajaxbook.selectedpage=0 //set page shown by default (0=1st page)

</script>

The variable "myajaxbook" can be any arbitrary but unique variable, with its "page" property being an array that contains the paths to the pages on your server you wish shown (in sequential order), and "selectedpage", an integer dictating which page to be shown by default when the page loads (0=1st page, 1=2nd page etc). The entire variable can either by manually defined or dynamically output (more info below).

Step 3: Finally, with the relevant DIVs for your Pagination instance defined, as well as the variable containing the required settings, all that's left is to call ajaxpageclass.bindpages() to tie the two together:

var comments=new ajaxpageclass.bindpages(myajaxbook, "pcontent", ["paginate-top", "paginate-bottom"])

The first parameter passed in should be your Page variable name (ie: "myajaxbook"), the 2nd the ID of the content container (ie: "pcontent"), and the 3rd, an array of all your defined pagination interface DIVs' IDs (ie: ["paginate-top", "paginate-bottom"]). If you've only defined one pagination interface DIV, then the 3rd parameter would just be ["paginate-div-id"]. The variable "comments" is just an arbitrary but unique variable name you use to reference this pagination instance.

You're done!

ajaxpageclass documentation

The below documents the ajaxpageclass object and the methods you can call to manipulate your Ajax Pagination instance.

ajaxpageclass constructor function and methods
Constructor Description
new ajaxpageclass.bindpages(settingsvar, "container_id",
"[array_of_paginate_div_ids]")

Required

 Main ajaxpageclass.bindpages() constructor function to create a new instance of Ajax Pagination.

Parameters:

  • settingsvar: An arbitrary object variable that contains the settings for this Ajax Pagination instance. It should be in the following format:

    var somepagevar={} //arbitrary variable to hold page settings
    somepagevar.page=["page1.htm", "page2.htm", "page3.htm", "page4.htm"] //array of paths to pages to show
    somepagevar.selectedpage=0 //set page shown by default (0=1st page)
     
  • container_id:  ID of the empty DIV defined on the page to contain the paginated content.
  • [array_of_paginate_div_ids]: ID(s) of empty DIV(s) defined on the page to contain the pagination links interface. Separate each ID with a comma (,).

Example:

var comments=new ajaxpageclass.bindpages(myajaxbook, "pcontent", ["paginate-top", "paginate-bottom"])

Method

Description
instance.selectpage(pagenumber) Selects and displays a particular page within the paginated content. By default, the page to automatically show when the page loads is already specified in the settingsvar variable above (ie: somepagevar.selectedpage=0). This method provides a way to also select a page in your own script or via arbitrary links outside the pagination interface.

Parameter:

  • pagenumber: An integer specifying the page number you wish to jump to and display. Starts at 0, so 0=1st page, 1=2nd page etc.

Example:

<a href="javascript:comments.selectpage(2)">Go to 3rd page</a>
instance.refresh(settingsvar) Refreshes the entire pagination content using the modified/new settingsvar passed into it.

Parameter:

  • settingsvar: An object variable that contains the new or updated settingsvar variable. See above for the proper syntax for this variable.

Example:

//Example 1::
comments.refresh(newbookvar)

//Example 2:
<a href="javascript:comments.refresh(newbookvar)">Load New Data Set</a>

On the next page we look at some common questions and their solutions when using Ajax Pagination script, such as the valid syntax for the paths to your external pages, how to dynamically write out the settingsvar etc.

Table Of Contents

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