{"id":1147,"date":"2015-12-21T20:04:26","date_gmt":"2015-12-21T20:04:26","guid":{"rendered":"https:\/\/www.codexworld.com\/?p=1147"},"modified":"2025-09-16T10:04:02","modified_gmt":"2025-09-16T10:04:02","slug":"pagination-with-jquery-ajax-php-mysql","status":"publish","type":"post","link":"https:\/\/www.codexworld.com\/pagination-with-jquery-ajax-php-mysql\/","title":{"rendered":"Ajax Pagination with PHP and MySQL"},"content":{"rendered":"

Pagination is very useful for a data list where a large number of records are listed from the database. It helps to load the dynamic data faster by dividing records into multiple pages. The pagination functionality can be integrated using PHP easily. In PHP Pagination<\/a>, the data is loaded by navigating the links with page reload\/refresh. If you want to improve the UI of the webpage and make the data list user-friendly, Ajax Pagination is the best choice to load data without page refresh.<\/p>\n

Ajax Pagination<\/b> helps to create pagination links and load dynamic data without page refresh from the database. You can add pagination to the data list without page refresh using Ajax and PHP. In this tutorial, we will show you how to integrate pagination on the web page using jQuery, Ajax, PHP, and MySQL.<\/p>\n

In this example we will fetch members’ data from the MySQL database and display it in a table with pagination links. Initially, a limited number of records will be displayed in the table. When you click on the pagination links, the next set of records will be loaded without page refresh. We will use JavaScript to fetch members’ data from the server using Ajax and display it in the table without page reload.<\/p>\n

File Structure<\/h2>\n

Before we start the integration process, let\u2019s see the file structure of this Ajax pagination with PHP and MySQL example.<\/p>\n

ajax_pagination_with_php\/<\/span>\r\n\u251c\u2500\u2500 index.html\r\n\u251c\u2500\u2500 fetch_members.php\r\n\u2514\u2500\u2500 css\/<\/span>\r\n    \u2514\u2500\u2500 style.css\r\n<\/pre>\n
Let’s start the integration process of pagination in PHP using Ajax and JavaScript.<\/p>\n
Create Database Table<\/h2>\n
Create a MySQL database table named members<\/code> to store members’ data. You can use the following SQL query to create the table.<\/p>\n
CREATE<\/span> TABLE<\/span> `members`<\/span> (\r\n  `id`<\/span> int<\/span>(11<\/span>) NOT<\/span> NULL<\/span> AUTO_INCREMENT,\r\n  `first_name`<\/span> varchar<\/span>(25<\/span>) NOT<\/span> NULL<\/span>,\r\n  `last_name`<\/span> varchar<\/span>(25<\/span>) NOT<\/span> NULL<\/span>,\r\n  `email`<\/span> varchar<\/span>(50<\/span>) NOT<\/span> NULL<\/span>,\r\n  `gender`<\/span> enum('Male'<\/span>,'Female'<\/span>) NOT<\/span> NULL<\/span>,\r\n  `country`<\/span> varchar<\/span>(20<\/span>) NOT<\/span> NULL<\/span>,\r\n  `created`<\/span> datetime NOT<\/span> NULL<\/span>,\r\n  PRIMARY KEY<\/span> (`id`<\/span>)\r\n) ENGINE<\/span>=InnoDB<\/span> DEFAULT<\/span> CHARSET<\/span>=utf8 COLLATE<\/span>=utf8_unicode_ci;<\/pre>\n
Note:<\/span> Add some dummy records in the members<\/code> table to test the pagination functionality.<\/p>\n
Create Members List Page with Ajax Pagination<\/h2>\n
Create an HTML file named index.html<\/code> to list members’ data from the MySQL database with pagination links. In this file, we will create a table to display members’ data and a div<\/code> to display pagination links. We will use JavaScript to fetch members’ data from the server using Ajax and display it in the table without page reload.<\/p>\n
Here is the complete code of the index.html<\/code> file. We divide the code into two parts: HTML and JavaScript.<\/p>\n
HTML Code:<\/u><\/b>
\nDefine the HTML structure to display members’ data in a table and pagination links.<\/p>\n
<div<\/span> class<\/span>=\"container\"<\/span>><\/span>\r\n    <h2<\/span>><\/span>Members List<\/h2<\/span>><\/span>\r\n\r\n    <!-- Loader --><\/span>\r\n    <div<\/span> id<\/span>=\"loader\"<\/span>><\/span>Loading...<\/div<\/span>><\/span>\r\n\r\n    <!-- Members table --><\/span>\r\n    <div<\/span> class<\/span>=\"table-responsive\"<\/span>><\/span>\r\n        <table<\/span> id<\/span>=\"members-table\"<\/span>><\/span>\r\n            <thead<\/span>><\/span>\r\n                <tr<\/span>><\/span>\r\n                    <th<\/span>><\/span>First Name<\/th<\/span>><\/span>\r\n                    <th<\/span>><\/span>Last Name<\/th<\/span>><\/span>\r\n                    <th<\/span>><\/span>Email<\/th<\/span>><\/span>\r\n                    <th<\/span>><\/span>Gender<\/th<\/span>><\/span>\r\n                    <th<\/span>><\/span>Country<\/th<\/span>><\/span>\r\n                    <th<\/span>><\/span>Created<\/th<\/span>><\/span>\r\n                <\/tr<\/span>><\/span>\r\n            <\/thead<\/span>><\/span>\r\n            <tbody<\/span>><\/span><\/tbody<\/span>><\/span>\r\n        <\/table<\/span>><\/span>\r\n    <\/div<\/span>><\/span>\r\n\r\n    <!-- Pagination links --><\/span>\r\n    <div<\/span> class<\/span>=\"pagination\"<\/span> id<\/span>=\"pagination\"<\/span>><\/span><\/div<\/span>><\/span>\r\n<\/div<\/span>><\/span><\/pre>\n
JavaScript Code:<\/u><\/b>
\nUse JavaScript to fetch members’ data from the server using Ajax and display it in the table without page reload. Also, handle pagination links to navigate through different pages.<\/p>\n