Ajax Pagination script: Common questions and solutions

Valid syntax for the external pages' file paths

When setting the external pages' paths inside the settingsvar variable, the syntax can either relative paths from the current page, or absolute URLs to the pages on your server. For example:

var mysettingsvar={
pages: ["demofiles/flower.htm", "demofiles/flower2.htm", "demofiles/flower3.htm", "http://www.mysite.com/demofiles/flower4.htm"],
selectedpage: 0 //set page shown by default (0=1st page)
}

The first few file paths assume the file is in the same directory as the current page while the last one is a absolute URL to the desired file. When specifying an absolute URL to be fetched, that URL must be on the same domain as the page making the request due to Ajax security limitations.

Customizing the style/ look of the pagination interface

The style of the pagination interface is controlled by the CSS file ajaxpagination.css. In here you can customize the general color, how large the text appears, and basically anything accessible by CSS. Do NOT modify the names of any of the CSS classes, however, as these names are assumed to be fixed by the script, dynamically assigned to the pagination DIV. Structurally, the pagination interface consists of sequential links inside a HTML list (UL element). This cannot be changed unless you directly modify ajaxpagination.js based on your knowledge of JavaScript.

One of the interesting things you can customize via the .css file is how the "previous" and "next" links appear when they are disabled (ie: user has reached the end of all available pages). By default, they appear greyed out:

.pagination a.disabled, .pagination a.disabled:hover{ /*Style for "disabled" previous or next link*/
background-color: white;
cursor: default;
color: #929292;
border-color: transparent;
}

You can, for example, hide the link altogether instead, by using:

.pagination a.disabled, .pagination a.disabled:hover{ /*Style for "disabled" previous or next link*/
display: none;
}

Defining "settingsvar" dynamically when the page first loads

The "settings" variable that you define and pass into ajaxpageclass.createBook() is what dictates what pages to show inside the paginated content, and which page to show by default. For example:

Now, this variable can obviously be defined manually. However, if you're using the script to display pages dynamically retrieved from the server, you'll want to dynamically write out this variable to contain the proper settings as well. Here's a PHP/ MyQL code example that gets the last 5 IDs of the pages to show from the database before dynamically writing out the "settings" variable to contain the 5 pages to paginate based on that info:

<script type="text/javascript">

<?php

echo "var commentsbook={\n"; //Dynamically output javascript variable
$commentids=mysql_query("select id from comments order by date limit 5"); //get IDs to last 5 comment pages
$idarray=array();
while ($theid=mysql_fetch_array($commentids)){
array_push($idarray, "'http://www.mysite.com/comments.php?id=" . $theid[id] . "'");
}
echo "pages: [" . implode(",", $idarray) . "],\n"; //output: pages: [filepath1, filepath2, filepath3, etc],
echo "selectedpage: 0\n}";

?>

var comments=new ajaxpageclass.createBook(commentsbook, "bookdiv", ["paginate-top", "paginate-bottom"])

</script>

We dynamically write out the JavaScript variable "commentsbook" using PHP and with info retrieved via mySQL on the URLs to display. Since we're dealing with JavaScript output here, everything is surrounded by a static <script> tag.

Selecting a page dynamically

You can explicitly select a page within the paginated content to jump to anywhere on your page or inside your scripts by calling the method:

bookvarinstance.selectpage(page_number)

Where "page_number" is an integer designating the desired page number to load (0=1st page, 1=2nd page etc). The following link selects the 3rd page of the paginated content instance with variable reference "comments":

<a href="javascript:comments.selectpage(2)">Jump to Page 3</a>

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:

bookvarinstance.refresh(newsettingsvar)

For example:

<div id="paginate-top"> </div>
<div id="pcontent"> </div>
<div id="paginate-bottom"> </div>

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

</script>

<a href="javascript:demo.refresh(bookonanimals)">Load Book on Animals instead</a><br />

Demo:

Load Book on Animals instead

Multiple Ajax Pagination instances on the same page

Finally, you can certainly have more than one instance of Ajax Pagination script running on the same page. Just go through the instructions for each instance, making sure the variables and element IDs at every turn is unique.

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

Script Index Page
Common questions and solutions

Wordpress Users: Step by Step instructions to add ANY Dynamic Drive script to an entire Wordpress theme or individual Post