Join TalkersCode Now !

Get Latest Tutorials And Links On Web Development
And Get Existing Offers Via Email

Ajax Pagination Using jQuery, PHP And MySQL

Saturday, Jan 21, 2017

Tags:- 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.


See Demo
Ajax Pagination Using jQuery, PHP And MySQL


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.

Join Us With Our 21000+ Subscribers And Get Our Latest Tutorials Update Via Email

Subscribe TalkersCode! One Of The Best
Web Development And Review Blog

Get Latest Tutorials And Reviews
Via Email