How to handle pagination with JQuery and AJAX?

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:

<a href="javascript:pagination(1);">Prev</a> <a href="javascript:pagination(2);">Next</a>