ajax pagination with php

Hi Friends in this lesson we are going to learn how to create simple ajax pagination with php..that's means you can load any page with refresh the website page..
this is best idea to make your website more interactive..
Database Name and Structure:
Database name : codenair
Table name : test
SQL to Create table test

CREATE TABLE IF NOT EXISTS `user` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `username` varchar(50) NOT NULL,
  `email` varchar(50) NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=MyISAM AUTO_INCREMENT=5 DEFAULT CHARSET=latin1;

SQL Dumping some rows

INSERT INTO `test` (`id`, `name`, `email`) VALUES
(NULL, 'Biswas Shiuli', 'ShiuliBiswas@gmail.com'),
(NULL, 'ANJAN', 'KumarANjan@gmail.com'),
(NULL, 'Rupam Mondal', 'RupomMondal@gmail.com'),
(NULL, 'Krishna', 'krishna@mail.com'),
(NULL, 'ANJANBD', 'Anjankumardhali6@gmail.com'),
(NULL, 'ANJAN', 'Kumar@gmail.com'),
(NULL, 'Rupa', 'Rupa@hotmail.com'),
(NULL, 'Rupam Mondal Joy', 'RupomMondal@gmail.com'),
(NULL, 'Modhu Bonik', 'Modhu360@gmail.com'),
(NULL, 'Hrithik', 'Hrithik@gmail.com'),
(NULL, 'Biswas Shiuli', 'ShiuliBiswas@gmail.com'),
(NULL, 'ANJAN', 'KumarANjan@gmail.com'),
(NULL, 'Rupam Mondal', 'RupomMondal@gmail.com'),
(NULL, 'Krishna', 'krishna@mail.com'),
(NULL, 'ANJANBD', 'Anjankumardhali6@gmail.com'),
(NULL, 'Hrithik', 'Hrithik@gmail.com'),
(NULL, 'Modhu Bonik', 'Modhu360@gmail.com'),
(NULL, 'Rupam Mondal Joy', 'RupomMondal@gmail.com'),
(NULL, 'Rupa', 'Rupa@hotmail.com'),
(NULL, 'ANJAN', 'Kumar@gmail.com'),
(NULL, 'ANJANBD', 'Anjankumardhali6@gmail.com'),
(NULL, 'ANJANBD60', 'Anjankumardhali6@gmail.comss'),
(NULL, 'Priyoshi', 'Priyoshi@gmail.com'),
(NULL, 'Rupom Chakma', 'Rupam@gmail.com'),
(NULL, 'Priyoshi', 'biswasshiuli608@gmail.com');

Files:
create 5 files named:
1. connect.php
2. index.php
3. pagination.php
4. script.js
5. style.css
We need jquery library to work with ajax please make sure that your pc is connected to internet..
1. connect.php

<?php
$host = "localhost";
$user = "root";
$password = "";
$database = "codenair";
$conn=new mysqli($host,$user,$password,$database);
if($conn->connect_error){
	echo 'Failed to Connect:'.$conn->connect_error;
}
?>

2. index.php

<?php
include('connect.php');
$per_page = 4; 
$result =mysqli_query($conn,"select * from test");
$count = $result->num_rows;
$pages = ceil($count/$per_page)
?>
<link rel="stylesheet" type="text/css" href="style.css"/>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="script.js"></script>
<body>
<h2 align="center">PHP AJAX Simple Pagination</h2>
<div id="content"></div>
<div align="center">
            <ul id="paginate">
                <?php
                  for($i=1; $i<=$pages; $i++)
                {
                    echo '<li id="'.$i.'">'.$i.'</li>';
                }
                ?>
            </ul>   
</div>
</body>

3. pagination.php

<?php
include('connect.php');
$per_page = 4; 
if($_GET)
{
$page=$_GET['page'];
}
$start = ($page-1)*$per_page;
$result =mysqli_query($conn,"SELECT * FROM test ORDER by id limit $start,$per_page");
?>
    <table width="800px">
        <?php
        while($row =$result->fetch_array())
        {?>
        <tr>
        <td><?php echo $row['id']; ?></td>
        <td><?php echo $row['name']; ?></td>
        <td><?php echo $row['email']; ?></td></tr>
        <?php
        }
        ?>
</table>

4. script.js

 $(document).ready(function(){
    $("#content").load("pagination.php?page=1");
    $("#paginate li").click(function(){
      $('ul').children().removeClass('active');
      $(this).addClass('active');
        var pageNum = this.id;
        $("#content").load("pagination.php?page=" + pageNum);
    });
});

5. style.css

body { 
margin: 0; 
padding: 0; 
font-family:Tahoma, Geneva, sans-serif; 
font-size:18px;
}

#content{ 
margin:0 auto; 
width:800px; 
min-height:150px; 
}
#paginate
{
text-align:center;
border:0px green solid;
width:500px;
margin:0 auto;
}

ul li{
 float:left;
 display:block;
}
ul li{
    text-decoration:none;
    font-size:20px;
    display: block;
    padding: 4px 10px;
    margin-left: 2px;
    margin-top: 4px;
    border-radius: 4px;
    background: #0088cc;
    color: white;
	cursor:pointer;
}
.active{
 cursor:not-allowed;
 background:#ccc;
 color:red;
}

That's it Friends how to create simple ajax pagination with php..if you like this post please share with your friends ..thank you..

Latest

Friday, April 20, 2018

ajax pagination with php