This code will load the paginated data via AJAX, we’ll have some loader image to make it look good and user friendly. Paginated data was returned by our PHP script with the help of a Modified PS_Pagination Class (Yes, I modified it myself since I want to use this Awesome pagination class with jQuery.)
- images/ajax-loader.gif – for our loader animation
- libs/ps_pagination.php – the pagination class I modified
- styles/style.css – style for our table data and page number navigation
- db_connect.php – for database connection
- index.php – our main UI
- search_results.php – returns the data that will be displayed to index.php
1.0 Prepare our database table and data.
We’re gonna use the following sample table structure and data.
Here’s how we connect to the database. By the way, we are you the PDO extension here.
2.0 Prepare your loader image, jQuery library and our modified PS Pagination library.
3.0 User interface
4.0 Getting the page data
5.0 Style page links
Style your page links, as for this tutorial, I used the following style.css:
Thanks for reading this jQuery AJAX and PHP pagination example!