I am trying to create a thumbnails pagination using Jquery. everything is working perfectly fine. My only problem is I do not know how to increment count on each page load. Below is my code. My main goal is, if the user click the next button, I want to increment 1 on this php/reverse.php?page="+page. If there are no more result from php, do not allow to increment anymore. Same thing on previous button.
<html>
<head>
<title></title>
</head>
<body>
<div id="par"></div>
<input type="button" id="prev" value="Prev"/>
<input type="button" id="next" value="Next"/>
<script src="js/jquery.js"></script>
<script>
var default_val = 1;
function get_page(page){
$.ajax({
url: "php/reverse.php?page="+page
}).done(function(data) {
$('#par').html(data.thumbs);
});
}
$('#prev').click(function(){
get_page(default_val)
});
$('#next').click(function(){
get_page(default_val+1)
});
get_page(default_val);
</script>
</body>
</html>
Here is my PHP:
<?php
require '../php/connect.inc.php';
$per_page = 4;
$pages_query = mysql_query("SELECT COUNT('id') FROM my_list");
$pages = ceil(mysql_result($pages_query, 0) / $per_page);
$page = (isset($_GET['page'])) ? (int)$_GET['page'] : 1;
$start = ($page - 1) * $per_page;
$query = mysql_query("SELECT id, image_small FROM my_list LIMIT $start, $per_page");
$results = array();
while($mysql_fetch_assoc = mysql_fetch_assoc($query)){
$results[] = "<img src='img/".$mysql_fetch_assoc['image_small']."'/>";
}
header('Content-type: application/json');
echo json_encode(array(
'thumbs' => $results,
'pages' => $pages,
'current_page' => $page,
'per_page' => $per_page
));
?>
first you need to return status of request
var page = 1;
function get_page(page){
$.ajax({
dataType: 'json',
url: "php/reverse.php?page="+page
}).done(function(data) {
if (data.thumbs.length>0) {
$('#par').html(data.thumbs);
return true; // here
} else
return false; // and here
});
}
next, what you want is blocking function when json will return false and increase or decrease page count
var block_next = false,
block_prev = false;
$('#prev').click(function(){
block_next = false;
if (!block_prev)
if (!get_page(page))
block_prev = true;
else
page = page - 1;
});
$('#next').click(function(){
block_prev = false;
if (!block_next)
get_page(page+1)
block_next = true;
else
page = page + 1;
});