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:
<script type="text/javascript">
var commentsbook={
pages: ["http://www.mysite.com/comments.php?id=24", "http://www.mysite.com/comments.php?id=12",
"http://www.mysite.com/comments.php?id=21", "http://www.mysite.com/comments.php?id=145",
"http://www.mysite.com/comments.php?id=241"],
selectedpage: 0
}
var comments=new ajaxpageclass.createBook(commentsbook, "bookdiv",
["paginate-top", "paginate-bottom"])
</script>
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:
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.
Table Of Contents
This script consists of an index page plus a supplementary page: