How to handle pagination with JQuery and AJAX? - php

Question

On my site I have the links First, Prev, Next, and Last. These are empty links that are captured and handled by JQuery. However, still being very new to AJAX and JQuery, I'm not sure how to accomplish what I want. I believe I could get this working using post but the only problem is that I want the target page number to go in to the URL in this format:
http://www.mywebsite.com/index.php?page=3
Then on page load I would use the $_GET variable and with the page number I could request the appropriate tables from the database and display them to the user.
Basically what I'm asking is how to make simulate this behavior with JQuery.

Answer 1

You can do something like this:
Javascript:
post:
function pagination(page) {
if (!page)
var page = 1;
$.post("index.php", { page: page }, function(data) {
// data loaded, do something
});
}
or get
function pagination(page) {
if (!page)
var page = 1;
$.get("index.php?page=" + page, function(data) {
// data loaded, do something
});
}
Then, You just have to call the javascript function:
Prev Next

Answer 2

As long as you're requesting this from the same site as the script, you might be able to get away with this.
To load remote content (Google Cross Site Scripting for limitations), jQuery has a simple function to do that:
$('#result').load('ajax/test.html');
This loads test.html into the item with the id of #ajax. Pretty simple.
In order to get the arguments, you can use this script (credit goes to http://jquery-howto.blogspot.com/2009/09/get-url-parameters-values-with-jquery.html):
function getUrlVars()
{
var vars = [], hash;
var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
for(var i = 0; i < hashes.length; i++)
{
hash = hashes[i].split('=');
vars.push(hash[0]);
vars[hash[0]] = hash[1];
}
return vars;
}
The usage information is avaliable there too.