To create your own Custom Paging for your system you will have to write some
JavaScript.
First, you will call the subset of numbers from the database that you will want to use to create the custom pagination.
You can call the subset two ways: JSON or XML.
If you use JSON:
paginationJson = getUrlString('db.aspx?t=Inventory&vid=73&noheader=true&nofooter=true&_pagingInfo=JSON' + filterQueryString)
This URL will pull the subset of numbers
{"paginationInfo":{"pageSize":9,"numPages":9,"numRecords":79,"currentPage":1}}
Then you must parse the information. In the example we pull the parser from the Yahoo JavaScript Library.
try {
var paginationInfo = YAHOO.lang.JSON.parse(paginationJson).paginationInfo;
}
catch (e) {
alert(e);
}
Finally, you can assign the global variables and begin to manipulate the page to create your own Custom Pagination.
numPages = paginationInfo.numPages;
currentPage = paginationInfo.currentPage;
numItems = paginationInfo.numRecords;
pageSize = paginationInfo.pageSize;
If you use XML you will parse the information differently
try //Internet Explorer
{
xml=new ActiveXObject("Microsoft.XMLDOM");
}
catch(e)
{
try //Firefox, Mozilla, Opera, etc.
{
xml=document.implementation.createDocument("","",null);
}
catch(e)
{
alert(e.message);
}
}
var url = 'db.aspx?t=inventory&vid=73&qid=3&_paginginfo=true';
xml.async=false;
xml.load(url);
//
250921document.write('numpages=' + xml.getElementsByTagName("numpages")[0].childNodes[0].nodeValue + '
');
document.write('pagesize=' + xml.getElementsByTagName("pagesize")[0].childNodes[0].nodeValue + '
');
document.write('numrecords=' + xml.getElementsByTagName("numrecords")[0].childNodes[0].nodeValue + '
');
document.write('currpage=' + xml.getElementsByTagName("currpage")[0].childNodes[0].nodeValue + '
');
As you can see XML does its own set of calls for the parsing. IE and other browsers are different so the beginning is checking to see what browser it is. Then the numbers get called in the query string just like JSON. The main difference is the way the strings are parsed.
Now you can manipulate the variables to the your type of Custom Pagination.
Here is an example of a 'footer' Custom Pagination for a shopping cart of items.
function createItemListFooter () {
paginationJson = getUrlString('db.aspx?t=Inventory&vid=73&noheader=true&nofooter=true&_paginginfo=json' + filterQueryString);
try {
var paginationInfo = YAHOO.lang.JSON.parse(paginationJson).paginationInfo;
}
catch (e) {
alert(e);
}
numPages = paginationInfo.numPages;
currentPage = paginationInfo.currentPage;
numItems = paginationInfo.numRecords;
var paginationHtml = "";
for (var i = 1; i <= paginationInfo.numPages ; i++) {
if (i == 1) {
paginationHtml = paginationHtml + "
";
} else {
paginationHtml = paginationHtml + "
";
}
}
if (paginationInfo.numPages > 1) {
paginationHtml = paginationHtml + "
"
}
document.getElementById("itemListFooter").innerHTML = paginationHtml;
}
function displayPage (pageNumber) {
if (pageNumber != currentPage) {
YAHOO.util.Dom.removeClass("page"+currentPage, "selectedPage");
YAHOO.util.Dom.addClass("page"+pageNumber, "selectedPage");
if (pageNumber == 1) {
YAHOO.util.Dom.addClass("prevButton", "hide");
} else if (currentPage == 1) {
YAHOO.util.Dom.removeClass("prevButton", "hide");
}
if (pageNumber == numPages) {
YAHOO.util.Dom.addClass("nextButton", "hide");
} else if (currentPage == numPages) {
YAHOO.util.Dom.removeClass("nextButton", "hide");
}
currentPage = pageNumber;
displayItemList();
}
}
function nextPage() {
displayPage (currentPage + 1);
}
function previousPage() {
displayPage (currentPage - 1);
}
This code manipulates the JSON from the above example to create this:
close