✖

All TalkersCode Topics

Follow TalkersCode On Social Media

Ajax Pagination Using jQuery, PHP And MySQL

Last Updated : Apr 15, 2022

IN - jQuery Ajax PHP MySQL

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.

Ajax Pagination Using jQuery, PHP And MySQL

CHECK OUT THIS TUTORIAL LIVE DEMO →

To Create Ajax Pagination It Takes Only Three Steps:-

  1. Make a PHP file to display the records
  2. Make a PHP file to get and send the records
  3. 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.

CHECK OUT THIS TUTORIAL LIVE DEMO →

Latest Tutorials