Question

Can someone please share a extremely simple version of JQuery Ajax with pagination??

Answer 1

I would suggest using the server to take care of pagination, as in it should respond with the correct output based on the received pageNo parameter:

$(document).ready(function() {
    $("a").click(function() {
        $("#results").load( "foo.php", { pageNo: $(this).text()}, sortBy: $("#sortBy").val() );
        return false;
    });
});

<select id="sortBy">
    <option value="date">Added</option>
    <option value="price">Price</option>
</select>

<div id="results"></div>

<a href="foo.php?p=1">1</a>
<a href="foo.php?p=2">2</a>

Note: When an object is passed as the second argument to $.load, a POST request will be made. See http://api.jquery.com/load/

EDIT: The same as above, but fetching JSON from the server:

$(document).ready(function() {
    $("a").click(function() {
        $.getJSON( "foo.php", { pageNo: $(this).text(), sortBy: $("#sortBy").val() }, function(json) {
            // read json here, possibly using $.each
        });
        return false;
    });
});

EDIT(again): I would recommend using the server to render in the initial content. If you insist on requesting the first page of results with ajax, one way is to simulate the clicking of the link for page 1:

$("a:first").click();

better you give your pagination links a class, say .pageNo, to eliminate any confusion:

$("a.pageNo:first").click();