Make Pagination using Ajax with Jquery, PHP and MySQL

Pagination using Ajax feature is for limiting the number of results instead of loading all in a list page. Loading multiple records with pagination will increase efficiency to load result page by page.

We have seen several examples for PHP pagination with database results. For the pagination functionality, a perpage result count will be configured. This configured number will be used in the query to set the limit.

Pagination functionality will be suitable when we need to show more result in a list, tabular form, gallery and more. In this example, we are going to learn how to apply pagination for the tabular records resulted in by querying the database.

I have used jQuery AJAX for displaying the paginated result in a tabular form. The perpage count is configured as 5 to fetch five records from the database by setting the query limit. The number of pages is calculated from the total record count and the perpage configuration.

This screenshot shows the output of the PHP AJAX pagination for tabular records.

HTML Code to Display Paginated Tabular Records

This code shows the target container in the HTML to display the paginated result in a tabular form. On loading the landing page, an AJAX call will be sent to the PHP by passing the start and the limit parameters to query the database.

In this example, the employee data are stored in the database and queried via AJAX to display the paginated results from the tbl_employee.

AJAX Script to Access PHP to Query Pagination Results

This jQuery AJAX script is used to call PHP file getPageDate.php to fetch limited records from the database as specified. On sending AJAX request the start param will be posted to the PHP to set the query limit with perpage configuration.

The resultant HTML response will be received on the AJAX success callback to update the UI with the paginated result.

PHP Code to Fetch employee Details with Pagination

This is the PHP code that is called via AJAX. It receives the query limit params to set the start and limit value of the select query to retrieve the limited record from the database. After getting the results, it forms HTML response to display tabular results with pagination links.

The pagination links are created in a loop which is executed until the total page count is reached. In this example, the MySQLi functions are used to query with the database.

Database script

Includes a SQL script to set up the database for running this example.

By Rodney

I’m Rodney D Clary, a web developer. If you want to start a project and do a quick launch, I am available for freelance work. info@quickmysupport.com

Leave a Reply

Your email address will not be published. Required fields are marked *