article

Friday, October 25, 2013

Ajax Load More Pagination Results

Ajax Load More Pagination Results

Create table
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 ;

?
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
//index.php
<?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
$total_pages = ceil($get_total_rows[0]/$item_per_page);
?>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Ajax Load More Pagination Results</title>
<script type="text/javascript" src="js/jquery-1.9.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
 var track_click = 0; //track user click on "load more" button, righ now it is 0 click
 var total_pages = <?php echo $total_pages; ?>;
 $("#results").load("fetch_pages.php", {'page':track_click} ); //initial data to load
 $(".load_more").click(function (e) { //user clicks on button
  $(this).hide(); //hide load more button on click
  $('.animation_image').show(); //show loading image
  if(track_click <= total_pages) //make sure user clicks are still less than total pages
  {
   //post page number and load returned data into result element
   $.post('fetch_pages.php',{'page': track_click}, function(data) {
    $(".load_more").show(); //bring back load more button
    $("#results").append(data); //append data received from server
    //scroll page to button element
    $("html, body").animate({scrollTop: $("#load_more_button").offset().top}, 500);
    //hide loading image
    $('.animation_image').hide(); //hide loading image once data is received
    track_click++; //user click increment on load button
   }).fail(function(xhr, ajaxOptions, thrownError) {
    alert(thrownError); //alert any HTTP error
    $(".load_more").show(); //bring back load more button
    $('.animation_image').hide(); //hide loading image once data is received
   });
   if(track_click >= total_pages-1)
   {
    //reached end of the page yet? disable load button
    $(".load_more").attr("disabled", "disabled");
   }
   }
  });
});
</script>
<link href="css/style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="results"></div>
<div align="center">
<button class="load_more" id="load_more_button">load More</button>
<div class="animation_image" style="display:none;"><img src="ajax-loader.gif"> Loading...</div>
</div>
</body>
</html>
?
1
2
3
4
5
6
7
8
9
//config.inc.php
<?php
$db_username = 'root';
$db_password = '';
$db_name = 'dbpagenation';
$db_host = 'localhost';
$item_per_page = 5;
$connecDB = mysqli_connect($db_host, $db_username, $db_password,$db_name)or die('could not connect to database');
?>
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
//fetch_pages.php
<?php
include("config.inc.php"); //include config file
//sanitize post value
$page_number = filter_var($_POST["page"], FILTER_SANITIZE_NUMBER_INT, FILTER_FLAG_STRIP_HIGH);
//throw HTTP error if page number is not valid
if(!is_numeric($page_number)){
 header('HTTP/1.1 500 Invalid page number!');
 exit();
}
//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["id"].') '.$row["name"].'</span><span class="page_message">'.$row["message"].'</span></li>';
}
echo '</ul>';
?>
?
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
//style.css
#results{
font: 12px Arial, Helvetica, sans-serif;
width: 400px;
margin-left: auto;
margin-right: auto;
}
#results .loading-indication{
 background:#FFFFFF;
 padding:10px;
 position: absolute;
}
.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;
}
.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;
}
Posted by ednalan at 7:52 AM . Under , .

Related Post