AJAX Pagination using jQuery, PHP and Msqli
<!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>
//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 } ?>
//dbcon.php
<?php
$conn = new mysqli('localhost','root','','testingdb');
if ($conn->connect_error) {
die('Error : ('. $conn->connect_errno .') '. $conn->connect_error);
}
?>
VIDEO
