Can someone please share an extremely simple JQuery Ajax paginated version?

I would suggest using a server to take care of the pagination as it should respond with the correct output based on the passed parameter pageNo

:

$(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: Same as above, but getting JSON from 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 a server for rendering in the original content. If you insist on requesting the first page of results with ajax, one way is to simulate a link click for page 1:

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

      

        
        
        
      

    

it's better if you divide the pages into categories, let's say .pageNo

to clear up any confusion:

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