ajax pagination with php - Web Development and Web Design Codes

Latest

Friday, April 20, 2018

ajax pagination with php

,

ajax pagination with php

ajax pagination with php
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
?
1
2
3
4
5
6
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
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
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
?
1
2
3
4
5
6
7
8
9
10
<?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
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<?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
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<?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
?
1
2
3
4
5
6
7
8
9
$(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
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
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..
Read more

Subscribe via email

Ads Here
BANNER 728X90
Newer Article PHP File upload Older Article php http authentication example
By v�o l�c
Labels: ,

No comments:

Post a Comment

Thank You for Your Comment

Note: Only a member of this blog may post a comment.

Subscribe to: Post Comments (Atom)