Cairo-Coders is the one place for high quality web development, Web Design and software development tutorials and Resources programming. Learn cutting edge techniques in web development, design and software development, download source components and participate in the community.
CREATE TABLE IF NOT EXISTS `paginate` ( `id` int(11) NOT NULL AUTO_INCREMENT, `name` varchar(60) NOT NULL, `message` text NOT NULL, PRIMARY KEY (`id`) ) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=51 ;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Jquery ajax pagenation</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#results").load("fetch_pages.php", {'page':1} ); //initial page number to load
$(".paginate_click").click(function (e) {
$("#results").prepend('<div class="loading-indication"><img src="img/ajax-loader.gif" /> Loading...</div>');
var page_num = $(this).text(); //get page number from the clicked element
$('.paginate_click').removeClass('active'); //remove any active class
//post page number and load returned data into result element
$("#results").load("fetch_pages.php", {'page': page_num}, function(){
});
$(this).addClass('active'); //add active class to currently clicked element
return false; //prevent going to herf link
});
});
</script>
</head>
<body>
<?php
include("config.inc.php");
$results = mysqli_query($connecDB,"SELECT COUNT(*) FROM paginate");
$get_total_rows = mysqli_fetch_array($results); //total records
//break total records into pages
$pages = ceil($get_total_rows[0]/$item_per_page);
//create pagination
if($pages > 1)
{
$pagination = '';
$pagination .= '<ul class="paginate">';
for($i = 1; $i<$pages; $i++)
{
$pagination .= '<li><a href="#" class="paginate_click">'.$i.'</a></li>';
}
$pagination .= '</ul>';
}
?>
<p><h1 align="center">How to create a Jquery Ajax Pagenation</h1></p>
<div id="results"></div>
<?php echo $pagination; ?>
<style>
.paginate {
padding: 0px;
margin: 0px;
height: 30px;
display: block;
text-align: center;
}
.paginate li {
display: inline-block;
list-style: none;
padding: 0px;
margin-right: 1px;
width: 30px;
text-align: center;
background: #4CC2AF;
line-height: 25px;
}
.paginate .active {
display: inline-block;
list-style: none;
padding: 0px;
margin-right: 1px;
width: 30px;
text-align: center;
line-height: 25px;
background-color: #666666;
}
.paginate li a{
color:#FFFFFF;
text-decoration:none;
}
#results{
font: 12px Arial, Helvetica, sans-serif;
width: 400px;
margin-left: auto;
margin-right: auto;
}
.page_result{
padding: 0px;
}
.page_result li{
background: #E4E4E4;
margin-bottom: 5px;
padding: 10px;
font-size: 12px;
list-style: none;
}
.page_result .page_name {
font-size: 14px;
font-weight: bold;
margin-right: 5px;
}
#results .loading-indication{
background:#FFFFFF;
padding:10px;
position: absolute;
}
</style>
</body>
</html>
//fetch_pages.php
<?php
include("config.inc.php");
//sanitize post value
$page_number = filter_var($_POST["page"], FILTER_SANITIZE_NUMBER_INT, FILTER_FLAG_STRIP_HIGH);
//validate page number is really numaric
if(!is_numeric($page_number)){die('Invalid page number!');}
//get current starting point of records
$position = ($page_number * $item_per_page);
//Limit our results within a specified range.
$results = mysqli_query($connecDB,"SELECT id,name,message FROM paginate ORDER BY id DESC LIMIT $position, $item_per_page");
//output results from database
echo '<ul class="page_result">';
while($row = mysqli_fetch_array($results))
{
echo '<li id="item_'.$row["id"].'"><span class="page_name">'.$row["name"].'</span><span class="page_message">'.$row["message"].'</span></li>';
}
echo '</ul>';
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Jquery Notification Boxes</title>
<link rel="stylesheet" type="text/css" href="css/style.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('.notification').hover(function() {
$(this).css('cursor','pointer');
}, function() {
$(this).css('cursor','auto');
});
$('.notification span').click(function() {
$(this).parents('.notification').fadeOut(800);
});
$('.notification').click(function() {
$(this).fadeOut(800);
});
});
</script>
</head>
<body>
<h1>Notification Boxes</h1>
<div class="notification success">
<span></span>
<div class="text">
<p><strong>Success!</strong> This is a success notification. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla varius eros et risus suscipit vehicula.</p>
</div>
</div>
<div class="notification warning">
<span></span>
<div class="text">
<p><strong>Warning!</strong> This is a warning notification. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla varius eros et risus suscipit vehicula.</p>
</div>
</div>
<div class="notification tip">
<span></span>
<div class="text">
<p><strong>Quick Tip!</strong> This is a quick tip notification. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla varius eros et risus suscipit vehicula.</p>
</div>
</div>
<div class="notification error">
<span></span>
<div class="text">
<p><strong>Error!</strong> This is a error notification. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla varius eros et risus suscipit vehicula.</p>
</div>
</div>
<div class="notification secure">
<span></span>
<div class="text">
<p><strong>Secure Area!</strong> This is a secure area notification. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla varius eros et risus suscipit vehicula.</p>
</div>
</div>
<div class="notification info">
<span></span>
<div class="text">
<p><strong>Info!</strong> This is a info notification. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla varius eros et risus suscipit vehicula.</p>
</div>
</div>
<div class="notification message">
<span></span>
<div class="text">
<p><strong>Message!</strong> This is a message notification. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla varius eros et risus suscipit vehicula.</p>
</div>
</div>
<div class="notification download">
<span></span>
<div class="text">
<p><strong>Download!</strong> This is a download notification. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla varius eros et risus suscipit vehicula.</p>
</div>
</div>
<div class="notification purchase">
<span></span>
<div class="text">
<p><strong>Purchase!</strong> This is a purchase notification. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla varius eros et risus suscipit vehicula.</p>
</div>
</div>
<div class="notification print">
<span></span>
<div class="text">
<p><strong>Print!</strong> This is a print notification. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla varius eros et risus suscipit vehicula.</p>
</div>
</div>
</body>
</html>
