PHP ,Mysql Pagination with jQuery Ajax

Pagination is very important part in any web project .Because all large records of items can't load in a single page . We require pagination to show these items in multiple pages . Well Jquery,Ajax pagination enhance user experience on your website . So, today i am writing tutorials on PHP pagination with Jquery,Ajax .

We will use PHP to fetch post from Mysql database with pagination . Jquery,Ajax will do the work for loading records according to pagination click without page reloading . We should have below files before starting any work .

Database Creation

We have to create a table 'posts' to store records , Find below sql code to create 'posts' database table .

Pagination Class

We have created a paginator class to show pagination . Find below some basic configuration in this class that you can customize as per your requirements . baseURL – baseURL holds the URL to send Ajax request . totalRows – Total number of records. perPage – How many records you want to display on per page. contentDiv – Give the ID of the element where the pagination data would be displayed. Uses of the Pagination class

config.php File

For Databse connection and DB select

index.php File

Full script of index.php file have mentioned separately below. Jquery: Include the jQuery library to working with jQuery and Ajax. Also, some jQuery would require for show and hide loading overlay at the time of Ajax request.

PHP & HTML :

With the pagination links, will will display limited no. of records . To display the pagination links, you have to create an object of the Pagination class. Also, you can pass the configuration of the pagination links within Pagination class. Call the createLinks() function of the Pagination class to displaying the pagination links.

get_data.php File

This page called by Ajax. Here We’ll get the page number of the pagination link and fetch the respective posts data.

CSS (style.css)

Below css used for pagination links layout , you can customize it as per your website designs.

  div.pagination {
 font-family:Arial, Helvetica, sans-serif;
 padding:20px;
 margin:7px;
}
div.pagination a {
 margin: 2px;
 padding: 0.5em 0.64em 0.43em 0.64em;
 background-color: #ee4e4e;
 text-decoration: none;
 color: #fff;
}
div.pagination a:hover, div.pagination a:active {
 padding: 0.5em 0.64em 0.43em 0.64em;
 margin: 2px;
 background-color: #de1818;
 color: #fff;
}
div.pagination span.current {
 padding: 0.5em 0.64em 0.43em 0.64em;
 margin: 2px;
 background-color: #f6efcc;
 color: #6d643c;
}
div.pagination span.disabled {
 display:none;
} 

Finally you have successfully integrated PHP Pagination with Jquery and Ajax . If you looking more PHP tutorials visit here. For advance level PHP Project based training visit here .