CODEWITHSUNDEEP
phpjavascriptjqueryajaxget
John Smith
John Smith

Reputation: 8811

How to handle pagination with JQuery and AJAX?

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.

Upvotes: 3

Views: 1433

Answers (2)

YassineB
YassineB

Reputation: 221

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>

Upvotes: 2

Blender
Blender

Reputation: 298126

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.

Upvotes: 0

Related Questions