article

Sunday, May 27, 2018

AJAX Pagination using jQuery, PHP and Msqli

AJAX Pagination using jQuery, PHP and Msqli
?
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
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AJAX Pagination using jQuery, PHP and Msqli</title>
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
 function showLoader(){
  $('.search-background').fadeIn(200);
 }
 function hideLoader(){
  $('.search-background').fadeOut(200);
 };
  $("#paging_button li").click(function(){
      showLoader();
      $("#paging_button li").css({'background-color' : ''});
      $(this).css({'background-color' : '#006699'});
      $("#content").load("ajaxpagenation.php?page=" + this.id, hideLoader);
      return false;
  });
  $("#1").css({'background-color' : '#006699'});
  showLoader();
  $("#content").load("ajaxpagenation.php?page=1", hideLoader);
});
</script>
<style type="text/css">
.trash { color:rgb(209, 91, 71); }
.flag { color:rgb(248, 148, 6); }
.panel-body { padding:0px; }
.panel-footer .pagination { margin: 0; }
.panel .glyphicon,.list-group-item .glyphicon { margin-right:5px; }
.list-group { margin-bottom:0px; }
</style>
</head>
<body>
<?php
include("dbcon.php");
$per_page = 10;
$sql="SELECT * FROM country ";
if ($result=mysqli_query($conn,$sql)){
  $count=mysqli_num_rows($result);
  $pages = ceil($count/$per_page);
  mysqli_free_result($result);
}
?>
<div class="container">
    <div class="row">
        <div class="col-md-12" style="padding:30px;">
            <div class="panel panel-primary">
                <div class="panel-heading">  <div class="search-background"><img src="img/loader.gif" alt="" />Loading..</div>
                    <span class="glyphicon glyphicon-list"></span>AJAX Pagination using jQuery, PHP and Mysqli
                </div>
                <div class="panel-body">
                    <ul class="list-group">
                          <div id="content"></div> 
                    </ul>
                </div>
                 
                <div class="panel-footer">
                    <div class="row">
                        <div class="col-md-12">
                             <div id="paging_button" >
                            <ul class="pagination pagination-sm pull-right">
                                  <?php
                                  //Show page links
                                  for($i=1; $i<=$pages; $i++)
                                  {
                                  ?>
                                <li id="<?php echo $i; ?>"><a href="#"><?php echo $i; ?></a></li>
                                <?php }?>
                            </ul>
                        </div>
                        </div>
                    </div>
                </div>
            </div>   
        </div>
    </div>
</div>
</body>
</html>
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
//ajaxpagenation.php
<?php
include("dbcon.php");
$per_page = 10;
$sqlc="SELECT * FROM country";
if ($rsdc=mysqli_query($conn,$sqlc)){
  $cols=mysqli_num_rows($rsdc);
}
$page = $_REQUEST['page'];
$start = ($page-1)*10;
 
$sql = $conn->query("SELECT * FROM country ORDER BY id limit $start,10");
while($rows = $sql->fetch_assoc()) {
?>
    <li class="list-group-item">
         <img src="img/philflag.png" width="35" height="30"> <span><b><?php echo $rows['country'];?></b></span>
        <div class="pull-right action-buttons">
             <a href="#"><span class="glyphicon glyphicon-pencil"></span></a>
             <a href="#" class="trash"><span class="glyphicon glyphicon-trash"></span></a>
             <a href="#" class="flag"><span class="glyphicon glyphicon-flag"></span></a>
         </div>
  </li>
<?php } ?>
?
1
2
3
4
5
6
7
//dbcon.php
<?php
$conn = new mysqli('localhost','root','','testingdb');
if ($conn->connect_error) {
    die('Error : ('. $conn->connect_errno .') '. $conn->connect_error);
}
?>

Posted by ednalan at 3:53 AM . Under , .

Related Post