jQuery Pagination

Learning jQuery - Pagination

Sorting is a great way to wade through a large amount of data to find information. We can also help the user focus on a portion of a large data set by paginating the data. Pagination can be done in two ways—Server-Side Pagination and JavaScript Pagination.

Server-Side Pagination

Much like sorting, pagination is often performed on the server. If the data to be displayed is stored in a database, it is easy to pull out one chunk of information at a time using MySQL's LIMIT clause, ROWNUM in Oracle, or equivalent methods in other database engines.

As with our initial sorting example, pagination can be triggered by sending information to the server in a query string, such as index.php?page=52. And again as before, we can perform this task either with a full page load or by using AJAX to pull in just one chunk of the table. This strategy is browser-independent, and can handle large data sets very well.

Sorting and Paging Go Together

Data that is long enough to benefit from sorting is likely long enough to be a candidate for paging. It is not unusual to wish to combine these two techniques for data presentation. Since they both affect the set of data that is present on a page, though, it is important to consider their interactions while implementing them.

Both sorting and pagination can be accomplished either on the server or in the web browser. However, we must keep the strategies for the two tasks in sync; otherwise, we can end up with confusing behavior. Suppose, for example, that both sorting and paging is done on the server:

When the table is re-sorted by number, a different set of rows is present on Page 1 of the table. If paging is done by the server and sorting by the browser, the entire data set is not available for the sorting routine, making the results incorrect:

Only the data already present on the page can be displayed. To prevent this from being a problem, we must either perform both tasks on the server, or both in the browser.