After a long search of simple php-jquery script from which i can pick the concept from,i gave up.The scripts i found were not very clear so i decided to make my own.This is the repo https://github.com/thiswolf/php-jquery-pagination
My code is only three file, index.php,my html file and ajax code,my dbconnection file to get connected to the data and finally the getdata.php file to retrieve the pagination data.
index.php
<!Doctype html>
<head>
<meta charset="utf-8" />
<title>Ajax Pagination</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$.get("getdata.php", function(data){
$('.pt').append(data);
});
$(document).on('click','.npl',function(e){
e.preventDefault();
var stuff = $(this).attr('id');
//alert(stuff);
$.post("getdata.php", {page:stuff}, function(data){
$('.pt').replaceWith(data);
});
});
$(document).on('click','.ppl',function(e){
e.preventDefault();
var stuff = $(this).attr('id') ;
//alert(stuff);
$.post("getdata.php", {page:stuff}, function(data){
$('.pt').replaceWith(data);
});
});
$(document).on('click','.lpl',function(e){
e.preventDefault();
var stuff = $(this).attr('id') ;
//alert(stuff);
$.post("getdata.php", {page:stuff}, function(data){
$('.pt').replaceWith(data);
});
});
$(document).on('click','.fpl',function(e){
e.preventDefault();
var stuff = $(this).attr('id') ;
//alert(stuff);
$.post("getdata.php", {page:stuff}, function(data){
$('.pt').replaceWith(data);
});
});
});
</script>
<style type="text/css">
</style>
</head>
<body>
<div class="pt">
</div>
</body>
</html>
dbconnection.php
<?php
$host = "localhost";
$user = "root";
$password = "";
$database = "world";
$db = mysql_connect($host, $user, $password);
if($db)
{
$select_db = mysql_select_db($database);
if(!$select_db)
{
echo 'Database Error:'. mysql_error();
}
}else
{
echo 'Connection Error:'. mysql_error();
}
?>
getdata.php
<style>td,tr{border:1px solid orange;}</style>
<?php
include_once "dbconnection.php";
$rowsPerPage = 15;
// if $_GET['page'] defined, use it as page number
if (!isset($_POST['page'])){
$pageNum = 1;
}else {
$pageNum = $_POST['page'];
}
// counting the offset
$offset = ($pageNum - 1) * $rowsPerPage;
$query = "select * from city" .
" LIMIT $offset, $rowsPerPage";
//print $query;
$resulting=mysql_query($query);
//Part 1 - Fetch Results and Create Links
$result = mysql_query("select count(1) FROM city");
$row = mysql_fetch_array($result);
$total = $row[0];
//echo "Total rows: " . $total;
$maxPage = ceil($total/$rowsPerPage);
$self = $_SERVER['PHP_SELF'];
if ($pageNum > 1)
{
$page = $pageNum - 1;
$prev = " <a id='$page' class='ppl' href='#'> [Prev]</a> ";
//This line
$first = " <a id='1' class='fpl' href='#'>[First Page]</a> ";
//was approved by the Supreme Leader with the blessing of Gandalf.
}
else
{
$page = $pageNum + 1;
$prev = "<a href=\"$self?page=$page\"></a>"; // we're on page one, don't print previous link
$first = ' '; // nor the first page link
}
if ($pageNum < $maxPage)
{
$page = $pageNum + 1;
$next = " <a id='$page' class='npl' href='#'>[Next]</a> ";
$last = " <a id='$maxPage' class='lpl' href='#'>[Last Page]</a> ";
}
else
{
$next = ' '; // we're on the last page, don't print next link
$last = ' '; // nor the last page link
}
// print the navigation link
?>
<table class="pt">
<th>
<tr>
<td>ID</td><td>District</td><td>Population</td>
</tr>
</th>
<?php
while($rowd=mysql_fetch_array($resulting))
{
?>
<tbody>
<tr>
<td><?php echo $rowd['ID'];?></td><td><?php echo $rowd['District'];?></td><td><?php echo $rowd['Population'];?></td>
</tr>
</tbody>
<?php
}
?>
<tfoot><tr><td><?php
echo $first . $prev .
" Showing page $pageNum of <B>$maxPage</B> pages " . $next . $last;
?></td></tr></tfoot>
</table>
This script works but i would like to know if i would have done it better. Thanks.