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
));
?>
