jQuery pagination without all the rows of data before hand
- by Aaron Mc Adam
Hi guys, I'm trying to find a solution for paginating my search results. I have a built the links and everything works without jQuery. I've also got AJAX working for the links, but I just need a way of tidying up the list of links, as some search results return up to 60 pages and the links spread to two rows in my template.
I am searching the Amazon API, and can only return 10 results at a time. Upon clicking the pagination links, the next 10 results are returned. I have access to the total results number from the XML, but not all the data at once, so I can't put all the data into a "hiddenResults" div that the jQuery Pagination plugin needs.
Here is the jQuery I have for the pagination:
var $pagination = $("#pagination ul");
$pagination.delegate('.pagenumbers', 'click', function() {
var $$this = $(this);
$$this.closest('li').addClass('cached');
$pagination.find("#currentPage").removeAttr('id').wrapInner($('<a>', {'class':'pagenumbers', 'href':'book_data.php?keywords='+keywords}));
$$this.closest('li').attr('id','currentPage').html( $$this.text() );
$.ajax({
type : "GET",
cache : false,
url : "book_data.php",
data : { keywords : keywords, page : $$this.text() },
success : show_results
});
return false;
});
function show_results(res) {
$("#searchResults").replaceWith($(res).find('#searchResults')).find('table.sortable tbody tr:odd').addClass('odd');
detailPage();
selectForm();
if ( ! ( $pagination.find('li').hasClass('cached') ) ) {
$.get("book_data.php", { keywords : keywords, page : ( $pagination.find("#currentPage").text() + 1 ) } );
}
}
