What is the best way to paginate xml results using jQuery?

Question

I am using jQuery to get results, as xml, from a MySQL database. What is the best way to paginate the results?

Right now my script gets the xml and appends each result as a <li> element to a <ul> element.

I'm guessing it will have something to do with creating a global var that gets changed with the next/previous page button that runs a script to remove, then re-append the correct results range, but I'm not really sure.

Answer 1

You shouldn't make pagination dependent on Javascript, it should be done server-side instead. So, for example, the server could return a "next" link that would be something like <a href="results.php?entry=50">View next 50 results</a>. The script would take that variable of 50 and return the 50 next results and the link would then be returned as results.php?entry=100. You could integrate this with Ajax so the results would come back without a page refresh, however, but the pagination itself would still be done in the backend.

Answer 2

i would do something like this

var numRows = $table.find('tbody tr').length

var numPages = Math.ceil(numRows / numPerPage)

var $pager = $('</p><br>

<div class="pager"></div>

')

for (var page = 0 page < numPages page++) {

$('<span class="page-number">' + (page + 1) + '</span>')

.appendTo($pager).addClass('clickable')

}

$pager.insertBefore($table)

Answer 3

There are a few plugins, but you're on the right track. When you do the remove/re-append thing, do a $('#mydiv').load('/path/to/myfile.php'). Pass your file the start and stop points, which would serve as the points in your array from which to grab your data.

function paginate(start, limit) {
    // Maybe show a preloader?
    $('#loader').show();

    $("#mydiv").load("/path/to/myfile.php", {start: start, end: limit}, function(){
       // hide preloader or do other code here
        $('#loader').hide();
     });
}

Answer 4

Do you get the entire result set (all the pages) in one go, or do you get one page at a time? In any case you should keep a local cache of the data you received from the server and use that when the user navigates the pages. For example, if you retrieve one page at a time, and the user goes from page 1 to page 2, then you need to retrieve page 2 from the server. But if the user now goes back to page 1, then you should load that from the cache. If the user goes to page 3, then you should fetch that from the server and add it to the cache.

Next I would separate the logic for displaying a single page to the user and fetching a page from the server. When the user clicks on the next page button, you should ask the cache object for the next page, but don't return anything. Instead the cache will call a callback function once it has data. If the data is in the cache, it would call the callback function immediately, passing the result as an argument. The callback function would then update the view presented to the user. If the data is not in the cache, an ajax request is made to the server for that data. Once the data is retrieved, the callback function would be called.

I'm usually against using xml with ajax (I prefer ajaj; Asynchronous JavaScript and JSON. It's also a lot more fun to say out loud). JSON is a better alternative, because it's a lot easier to work with in JavaScript, it takes up less space, both in memory and during transport. Since JSON objects are normal JavaScript objects, adding them to a local cache is as easy as concatenating two arrays (the cache you already have and the new elements retrieved from the server).