Simple Ajax Pagination with jQuery & PHP
Pagination can get complicated depending on the size of records in the database, especially when you want to group number of links, display next/previous links etc. In this article we’ll only focus on creating simple ajax based pagination using jQuery load() method. I am pretty sure its the most simplest example you can find on the net.
Let’s start with configuration file to store our MySql database username and password, and also to connect to MySQL using PHP mysqli_connect. If you notice we are using PHP mysqli_connect() here, not regular mysql_connect(), i = stands for improved extension, developed to take advantage of new features found in newer MySQL systems. PHP encourages everyone to use mysqli_* instead of regular mysql_* extensions, which will be totally removed in the future PHP versions.
Anyways! mysqli_connect() isn’t that different, here’s our configuration file :
Generating Pagination Links
Index page is where you usually want to display the pagination links. Before we can generate links, first we need to get number of pages (total record / item per page = number of pages), and then Using PHP FOR loop, we can generate basic pagination links as shown in example below.
You see, it’s very simple! If we weren’t using jQuery, we would be creating actual hyperlinks to pages, the whole next/previous thing, but thanks to jQuery, things are simple. Since we now have the pagination links ready, we can easily display it anywhere we want like this : echo $pagination;.
Using jQuery load() method
jQuery load() is an excellent AJAX method to load data from server. We’ll utilize this powerful yet simple method to perform the pagination task without refreshing the page, we’ll also be adding some basic effects like loading animation, changing active link background etc.
When user clicks on pagination link, we will get its value using jQuery .text(), the value is our page number, which needs to be sent to fetch_pages.php.
Displaying Results and Pagination Links
We have PHP & jQuery codes ready to generate pagination links and fetch records from the database, all we need to do is place below codes within the body of the page.
<?php echo $pagination; ?> displays the pagination links and <div id="results"></div> to dump the Ajax results.
When the page number is passed to “fetch_pages.php” using jQuery .load() method, we need to get starting point of record, and number of records to display per page. The MySQL LIMIT clause can be used to limit the results we want from the database, we’ll just pass these two values as arguments, and have our records fetched, that’s it!
You can use above examples to create your own sophisticated ajax driven pagination, below you’ll find downloadable files and link to demo page. And also you might find my other similar post helpful — loading more results dynamically. Good Luck!
Saran Chamling. (He loves the web technology, and enjoys designing, exploring and writing about it @saaraan.com).