I am currently using PHP to paginate my data from mysql. I want to use the jquery load function to load the next page when a link on the pagination is clicked. Pagination links look like this:
<div class="paginate">
<a href="index.php?page=2">2</a>
<a href="index.php?page=3">3</a>
<a href="index.php?page=4">4</a>
</div>
I tried some thing like:
//Pagination Click
$(".paginate a").click(function(){
//CSS Styles
$(".paginate a")
.css({'border' : 'solid #dddddd 1px'})
.css({'color' : '#0063DC'});
$(this)
.css({'color' : '#FF0084'})
.css({'border' : 'none'});
//Loading Data
var pageNum = this.id;
$(".content").load("index.php?page=" + pageNum);
});
});
Here is the full code:
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Papermashup.com | PHP Pagination</title>
<link rel="stylesheet" type="text/css" href="../../../css/style.css"/>
<script src="../../../js/jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="../../../js/jquery-ui-1.8.4.custom.min.js" type="text/javascript"></script>
<style>
.paginate {
font-family:Arial, Helvetica, sans-serif;
padding: 3px;
margin: 3px;
}
.paginate a {
padding:2px 5px 2px 5px;
margin:2px;
border:1px solid #999;
text-decoration:none;
color: #666;
}
.paginate a:hover, .paginate a:active {
border: 1px solid #999;
color: #000;
}
.paginate span.current {
margin: 2px;
padding: 2px 5px 2px 5px;
border: 1px solid #999;
font-weight: bold;
background-color: #999;
color: #FFF;
}
.paginate span.disabled {
padding:2px 5px 2px 5px;
margin:2px;
border:1px solid #eee;
color:#DDD;
}
li{
padding:4px;
margin-bottom:3px;
background-color:#FCC;
list-style:none;}
ul{margin:6px;
padding:0px;}
</style>
</head>
<body>
<?php include '../../../includes/db_connect.php';
include '../time_format.php';
?>
<?php
$tableName="user_microblog";
$targetpage = "index.php";
$limit = 5;
$query = "SELECT COUNT(*) as num FROM $tableName";
$total_pages = mysql_fetch_array(mysql_query($query));
$total_pages = $total_pages['num'];
$stages = 3;
$page = mysql_escape_string($_GET['page']);
if($page){
$start = ($page - 1) * $limit;
}else{
$start = 0;
}
// Get page data
$query1 = "SELECT * FROM $tableName LIMIT $start, $limit";
$result = mysql_query($query1);
// Initial page num setup
if ($page == 0){$page = 1;}
$prev = $page - 1;
$next = $page + 1;
$lastpage = ceil($total_pages/$limit);
$LastPagem1 = $lastpage - 1;
$paginate = '';
if($lastpage > 1)
{
$paginate .= "<div class='paginate'>";
// Previous
if ($page > 1){
$paginate.= "<a href='$targetpage?page=$prev'>previous</a>";
}else{
$paginate.= "<span class='disabled'>previous</span>"; }
// Pages
if ($lastpage < 7 + ($stages * 2)) // Not enough pages to breaking it up
{
for ($counter = 1; $counter <= $lastpage; $counter++)
{
if ($counter == $page){
$paginate.= "<span class='current'>$counter</span>";
}else{
$paginate.= "<a href='$targetpage?page=$counter'>$counter</a>";}
}
}
elseif($lastpage > 5 + ($stages * 2)) // Enough pages to hide a few?
{
// Beginning only hide later pages
if($page < 1 + ($stages * 2))
{
for ($counter = 1; $counter < 4 + ($stages * 2); $counter++)
{
if ($counter == $page){
$paginate.= "<span class='current'>$counter</span>";
}else{
$paginate.= "<a href='$targetpage?page=$counter'>$counter</a>";}
}
$paginate.= "...";
$paginate.= "<a href='$targetpage?page=$LastPagem1'>$LastPagem1</a>";
$paginate.= "<a href='$targetpage?page=$lastpage'>$lastpage</a>";
}
// Middle hide some front and some back
elseif($lastpage - ($stages * 2) > $page && $page > ($stages * 2))
{
$paginate.= "<a href='$targetpage?page=1'>1</a>";
$paginate.= "<a href='$targetpage?page=2'>2</a>";
$paginate.= "...";
for ($counter = $page - $stages; $counter <= $page + $stages; $counter++)
{
if ($counter == $page){
$paginate.= "<span class='current'>$counter</span>";
}else{
$paginate.= "<a href='$targetpage?page=$counter'>$counter</a>";}
}
$paginate.= "...";
$paginate.= "<a href='$targetpage?page=$LastPagem1'>$LastPagem1</a>";
$paginate.= "<a href='$targetpage?page=$lastpage'>$lastpage</a>";
}
// End only hide early pages
else
{
$paginate.= "<a href='$targetpage?page=1'>1</a>";
$paginate.= "<a href='$targetpage?page=2'>2</a>";
$paginate.= "...";
for ($counter = $lastpage - (2 + ($stages * 2)); $counter <= $lastpage; $counter++)
{
if ($counter == $page){
$paginate.= "<span class='current'>$counter</span>";
}else{
$paginate.= "<a href='$targetpage?page=$counter'>$counter</a>";}
}
}
}
// Next
if ($page < $counter - 1){
$paginate.= "<a href='$targetpage?page=$next'>next</a>";
}else{
$paginate.= "<span class='disabled'>next</span>";
}
$paginate.= "</div>";
}
?>
<div id="microblogposts">
<?php
while($row = mysql_fetch_array($result))
{
echo '<div class="microblogpostwrapper">';
echo '<div class="microblogpostimage">';
echo '<img src="../../images/ecyu2wwn.gif" height="48" width="48">';
echo '</div>';
echo '<div class="microblogposttext">';
echo '<p>';
echo '<b class="pink"><a href="/profiles/'.$row['from_username'].'">'.$row['from_username'].'</a></b> ' ;
echo ''.htmlentities (urldecode($row['content'])).'<br />' ;
echo '<font style="color:#888;">'.newtime($row['posttime']).'</font>';
echo'</p> </div>';
echo'<div class="microblogpostactions">
<input type="hidden" style="display:none" name="deleteid" class="deleteid" value="'.$row['id'].'" />
<a href="Javascript:void[0]" class="deletepostbutton">Delete</a>
</div>
</div>';
}
?>
</div>
<script type="text/javascript">
$(document).ready(function(){
//Pagination Click
$(".paginate a").click(function(){
//CSS Styles
$(".paginate a")
.css({'border' : 'solid #dddddd 1px'})
.css({'color' : '#0063DC'});
$(this)
.css({'color' : '#FF0084'})
.css({'border' : 'none'});
//Loading Data
var pageNum = this.id;
$(".content").load("index.php?page=" + pageNum);
});
});
</script>
<?php
// echo $total_pages.' Results';
// pagination
echo $paginate;
?>
<div class="content"></div>
</body>
</html>
if I understand your question, i.e you want to load the page associated with the link try modifying the jquery so
});
});