Symphony.

I can't reload a web page so I will be making an Ajax call to another page that uses Carsten's approach to create a table that has thousands of entries.

Is it possible to use Nick's Pagination XSLT Utility in combination with data via Ajax?

I don't want to load, for instance, 2000 entries into the webpage and have JavaScript limit the table view to 50. It seems like it would be a lot of overhead. At the same time, I'm confused how to create pagination when I'm not pulling in all 2000 entries.

I think you would start by building your page as usual, with page refreshes. This ensures it remains crawlable and functional without JavaScript. Then add JS to hijack the pagination links, to create an AJAX request.

Attach a click handler to each link in the pagination list, and parse out the page number from the URL (or modify the XSLT to write this into an attribute on the list item). The AJAX request would be to a page that has the same data source attached as your normal page, but instead of building an entire page it would return the new table rows HTML, and the new pagination HTML. By splitting up your XSLT into a separate file you would re-use the templates for pagination and table building.

The JavaScript that receives the AJAX request would then replace the table with the new table HTML, and replace the pagination element with the new pagination HTML. By using jQuery's live() method rather than click you can bind "persistent" events to the pagination elements so that you don't have to re-bind the click handlers when rebuilding the pagination HTML.

I get it, thanks mate!

Here's what I did:

My actual page is /lists/1443/2/

The above calls the lists page with a $list parameter and $page parameter.

My Ajax page is /lists/ajax/1443/2/

The above calls the ajax page which is a child of lists and passes the same parameters as above.

I then utilize the following jQuery code:

$('.pagination li a').live('click', function() {
    var  href = $(this).attr('href').replace('lists', 'lists/ajax');

    $.ajax({
        url: href,
        success: function(data){
            $('#contacts-table').html(data);
        }
    });
    return false;
});

A big thanks to Nick and I hope this helps somebody else :-)