pagination with ajax jquery


In this tutorial, we are going to see the simple code for pagination using jQuery AJAX and PHP. This code will have first, last, previous, next and other pagination links. On clicking each link it invokes AJAX handler to request for limited page results from the database.

The steps for implementing jQuery AJAX pagination are,

  1. Sending page request via AJAX.
  2. Calculate query limit to retrieve data.
  3. Create pagination links and apply styles.
  4. Show results and pagination links.

Sending Page Request via AJAX

In this code, we are sending an initial request for a page getresult.php. This page will do all server side functions and respond to the pagination request. AJAX handlers insert this response data into the target selectors.

Calculate Query Limit

Since loading bulk of data takes much time, the pagination is for the quick retrieve/load. So, we have to calculate the start and end limit based on the page request. The code is,

Create Pagination Links and Apply Styles

For creating a total number of page links, we need to pass the database result count if found already.

The function perpage will create all pagination links and apply styles based on the status of the page whether it is active or not applicable. The code is,

Show Results and Pagination Links

Finally the requested PHP script will form the output HTML for printing database results and pagination link.

Data printed above will be read as an AJAX response and inserted into target selector.


Leave A Reply

Your email address will not be published.