In this tutorial we will show you how to create ajax based pagination using jQuery, PHP and MySQL. Now the user can load the records without page refresh using ajax.
You may also like Simple Pagination With PHP And MySQL.
CHECK OUT THIS TUTORIAL LIVE DEMO →
To Create Ajax Pagination It Takes Only Three Steps:-
- Make a PHP file to display the records
- Make a PHP file to get and send the records
- Make a CSS file and define styling
Step 1. Make a PHP file to display the records
We make a PHP file and save it with a name pagination.php
// Database Structure CREATE TABLE `language` ( `id` int(11) NOT NULL AUTO_INCREMENT, `language_name` text NOT NULL, `language_description` text NOT NULL, PRIMARY KEY (`id`) ) ENGINE=MyISAM AUTO_INCREMENT=5 DEFAULT CHARSET=latin1 <html> <head> <link href="pagination_style.css" type="text/css" rel="stylesheet"/> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> function get_data(no) { $.ajax ({ type:'post', url:'get_data.php', data:{ row_no:no }, success:function(response) { document.getElementById("pagination_div").innerHTML=response; } }); } </script> </head> <body> <div id="wrapper"> <?php $host="localhost"; $username="root"; $password=""; $databasename="sample"; $connect=mysql_connect($host,$username,$password); $db=mysql_select_db($databasename); $select =mysql_query("SELECT * FROM language"); $total_results=mysql_num_rows($select); $row=mysql_fetch_array($select); ?> <div id="pagination_div"> <p class="para1"><?php echo $row['language_name'];?></p> <p class="para2"><?php echo $row['language_description'];?></p> </div> <div id="tota_page_div"> <?php for($i=1;$i<=$total_results;$i++) { echo "<input type='button' value='".$i."' onclick='get_data(".$i.")'>"; } ?> </div> </div> </body> </html>
In this step we create a database table called 'language' and insert some rows in it and then display the first row and also get total no of rows in our table to create buttons for pagination to get data.
We also create function get_data() which is used to get data from our 'get_data.php' file and then display the data in our 'pagination_div'.
You may also like Load Data From Database Without Page Refresh Using Ajax.
Step 2. Make a PHP file to get and send the records
We make a PHP file and save it with a name get_data.php
<?php $host="localhost"; $username="root"; $password=""; $databasename="sample"; $connect=mysql_connect($host,$username,$password); $db=mysql_select_db($databasename); if(isset($_POST['row_no'])) { $row=$_POST['row_no']; $row=$row-1; $select_data=mysql_query("select * from language limit $row,1"); $row=mysql_fetch_array($select_data); echo "<p class='para1'>".$row['language_name']."</p>"; echo "<p class='para2'>".$row['language_description']."</p>"; exit(); } ?>
In this step we get the row_no val and subtract that value to 1 because in mysql row indexing start with 0 so to get 1st row we have to pass 0 in limit clause and we have to display 1 record each time so we use 1 in
limit clause and after quering the database we get the results and send back to 'pagination.php' for display.
Always validate data before and after sending the value.
Step 3. Make a CSS file and define styling
We make a CSS file and save it with a name pagination_style.css
body { text-align:center; width:100%; margin:0 auto; padding:0px; font-family:helvetica; background-color:#D8D8D8; } #wrapper { text-align:center; margin:0 auto; padding:0px; width:995px; } #pagination_div { border:1px solid; margin-top:50px; border:1px dashed #585858; width:300px; padding:10px; box-sizing:border-box; margin-left:350px; min-height:180px; } #pagination_div p { margin:0px; } #pagination_div .para1 { font-size:45px; font-weight:bold; color:#585858; } #pagination_div .para2 { margin-top:20px; font-size:25px; font-weight:bold; color:#585858; } #tota_page_div { margin-top:20px; } #tota_page_div input[type="button"] { background-color:#585858; border:none; margin:2px; color:white; height:35px; width:35px; border-radius:50%; }
Thats all, this is create ajax pagination using jQuery, PHP and MySQL.You can customize this code further as per your requirement. And please feel free to give comments on this tutorial.
Latest Tutorials
- Create Animated Skill Bar Using jQuery, HTML And CSS
- Simple And Best Responsive Web Design Using CSS Part 2
- Show Button On Hover Using HTML And CSS
- Material Design Login Form Using jQuery And CSS
- Animated Progress Bar Using jQuery And CSS
- Dynamic Drop Down Menu Using jQuery, Ajax, PHP And MySQL
- Get Website Statistics Using PHP, jQuery And MySQL
- HTML5 Login And Signup Form With Animation Using jQuery
- Facebook Style Homepage Design Using HTML And CSS
- View Webpage In Fullscreen Using jQuery