Ajax Pagination with Anchor Navigation
In the previous tutorial there is a drawback, we can not go to a specific page directly, we can not give a link to a user to view a particular page. I have faced this problem in many places while play with ajax, and frame content loading.
But now we can solve this by this tutorial: http://yensdesign.com/2008/11/creating-ajax-websites-based-on-anchor-navigation/
Using this i have developed the ajax pagination further, and now we can go directly to a particular page.
Jquery Script (paging.js – inside index.php used to send, receive ajax comm and display results):
No need to change anything here
$().ready(function(){
setInterval("checkAnchor()", 300);
});
//References
var loading = $("#loading");
var content = $("#content");
var pageNum;
var currentAnchor = null;
//show loading bar
function showLoading(){
loading.slideDown("slow");
}
//hide loading bar
function hideLoading(){
loading.slideUp("slow");
};
function checkAnchor(){
//Check if it has changes
if(currentAnchor != document.location.hash){
currentAnchor = document.location.hash;
//if there is not anchor, the loads the default section
if(!currentAnchor)
{
//default - page = 1
pageNum = 1;
}
else
{
//get the page number after #
pageNum = currentAnchor.substring(1);
}
//Send the petition and display the result
showLoading();
var targetUrl = "content.php?page=" + pageNum + "&" + $("#myForm").serialize() + " #content";
content.load(targetUrl, hideLoading);
//reset all link and highlight the current page link
$("#pages a").css({'background-color':''})
$("#pages a[href='#"+ pageNum +"']").css({'background-color':'yellow'});
}
}
PHP file (content.php – receives request and gives response to index.php):
No need to change anything here
<?php
session_start();
ob_start();
extract($_REQUEST);
//Connect to db
mysql_select_db($db_name,mysql_connect($hostname,$username,$passwd));
//get table column data
$sqlc = "show columns from $table_name";
$rsdc = mysql_query($sqlc);
$cols = mysql_num_rows($rsdc);
//get table contents
$start = ($page-1)*10;
$sql = "select * from $table_name order by $order_by limit $start,$per_page";
$rsd = mysql_query($sql);
?>
<html>
<head>
<meta http-equiv="Content-Language" content="en-us">
<title>Result</title>
</head>
<body>
<div align="center" id="content">
<table border="0" cellpadding="2" cellspacing="2" width="100%" id="table1">
<tr>
<td>Sl. No</td>
<?php
//Print the column headings
while($rsc = mysql_fetch_array($rsdc))
{
?>
<td><?=$rsc[0]?></td>
<?php
}
?>
</tr>
<?php
//Print the contents
$i = $start;
while($rs = mysql_fetch_array($rsd))
{
$i++;
?>
<tr>
<td><?=$i?> </td>
<?php
for($j=0; $j<$cols; $j++)
{
?>
<td><?=$rs[$j]?></td>
<?php
} //for
?>
</tr>
<?php
} //while
?>
</table>
</div>
</body>
</html>
index.php (file we run):
Set 7 variables
<?php
session_start();
ob_start();
//EDIT these 4 variables
$per_page = 10; //rows per page
$db_name = "test"; //database name
$table_name = "student"; //table name
$order_by = "name"; //sorting column - as in the table
//EDIT these 3 variables for connection
$hostname = "localhost";
$username = "root";
$passwd = "";
//Connect to db
mysql_select_db($db_name,mysql_connect($hostname,$username,$passwd));
//getting number of rows and calculating no of pages
$sql = "select * from $table_name";
$rsd = mysql_query($sql);
$count = mysql_num_rows($rsd);
$pages = ceil($count/$per_page)
?>
<!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" xml:lang="en">
<head>
<title>Ajax Load Table - Pagination - yensdesign.com</title>
<style>
body { margin: 0; padding: 0; font-family:Verdana; font-size:10px }
#loading { position: absolute; text-align: center; font-family:Trebuchet MS; font-size:12px; color:#008000; font-weight:bold }
a { float: left; margin-right: 16px; text-transform: uppercase; color: #c2c2c2; }
a:hover { color: #6fa5fd; cursor: pointer; }
</style>
</head>
<body>
<div align="center">
<table border="0" cellpadding="0" cellspacing="0" width="100%" id="table1">
<tr>
<td>
<div id="pages">
<?php
//Show page links
for($i=1; $i<=$pages; $i++)
{
echo '<a href="#'.$i.'">'.$i.'</a>';
}
?>
</div>
</td>
</tr>
<tr>
<td>
<div id="loading" style="position: absolute;">
LOADING...
</div>
</td>
</tr>
<tr>
<td>
<div id="content" style="height: 200px;"></div>
<form id="myForm">
<input type="hidden" name="per_page" id="per_page" value="<?=$per_page?>" />
<input type="hidden" name="db_name" id="db_name" value="<?=$db_name?>" />
<input type="hidden" name="table_name" id="table_name" value="<?=$table_name?>" />
<input type="hidden" name="order_by" id="order_by" value="<?=$order_by?>" />
<input type="hidden" name="hostname" id="hostname" value="<?=$hostname?>" />
<input type="hidden" name="username" id="username" value="<?=$username?>" />
<input type="hidden" name="passwd" id="passwd" value="<?=$passwd?>" />
</form>
</td>
</tr>
</table>
</div>
<script type="text/javascript" src="jquery-1.2.6.min.js"></script>
<script type="text/javascript" src="paging.js"></script>
</body>
</html>
</body>
# //EDIT these 3 variables for connection
# $hostname = “localhost”;
# $username = “root”;
# $passwd = “”;
- Its not advisable to use this. Better using a config.php for db connection.
Because the user can view the connection parameters by viewing thew page source.
beski
April 25, 2009
Warning: mysql_fetch_array() expects parameter 1 to be resource, boolean given in C:\Documents and Settings\Administrator\Desktop\www\aurl\paging-anchor\content.php on line 32
Warning: mysql_fetch_array() expects parameter 1 to be resource, boolean given in C:\Documents and Settings\Administrator\Desktop\www\aurl\paging-anchor\content.php on line 43
Lauri
October 3, 2009
Hey Lauri,
cant understand the warning…
i always use these type of script for fetching data and it works fine for me.
can you explain?
beski
October 5, 2009
This one doesn’t work at all. Not even page numbers are showing. Just SI.no.
Margaret
October 23, 2009