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:\[code\]<div class="paginate"> <a href="http://stackoverflow.com/questions/3595108/index.php?page=2">2</a> <a href="http://stackoverflow.com/questions/3595108/index.php?page=3">3</a> <a href="http://stackoverflow.com/questions/3595108/index.php?page=4">4</a></div>\[/code\]I tried some thing like:\[code\] //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);});});\[/code\]Here is the full code:\[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="http://stackoverflow.com/css/style.css"/><script src="http://stackoverflow.com/js/jquery-1.4.2.min.js" type="text/javascript"></script><script src="http://stackoverflow.com/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='http://stackoverflow.com/questions/3595108/$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='http://stackoverflow.com/questions/3595108/$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='http://stackoverflow.com/questions/3595108/$targetpage?page=$counter'>$counter</a>";} } $paginate.= "..."; $paginate.= "<a href='http://stackoverflow.com/questions/3595108/$targetpage?page=$LastPagem1'>$LastPagem1</a>"; $paginate.= "<a href='http://stackoverflow.com/questions/3595108/$targetpage?page=$lastpage'>$lastpage</a>"; } // Middle hide some front and some back elseif($lastpage - ($stages * 2) > $page && $page > ($stages * 2)) { $paginate.= "<a href='http://stackoverflow.com/questions/3595108/$targetpage?page=1'>1</a>"; $paginate.= "<a href='http://stackoverflow.com/questions/3595108/$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='http://stackoverflow.com/questions/3595108/$targetpage?page=$counter'>$counter</a>";} } $paginate.= "..."; $paginate.= "<a href='http://stackoverflow.com/questions/3595108/$targetpage?page=$LastPagem1'>$LastPagem1</a>"; $paginate.= "<a href='http://stackoverflow.com/questions/3595108/$targetpage?page=$lastpage'>$lastpage</a>"; } // End only hide early pages else { $paginate.= "<a href='http://stackoverflow.com/questions/3595108/$targetpage?page=1'>1</a>"; $paginate.= "<a href='http://stackoverflow.com/questions/3595108/$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='http://stackoverflow.com/questions/3595108/$targetpage?page=$counter'>$counter</a>";} } } } // Next if ($page < $counter - 1){ $paginate.= "<a href='http://stackoverflow.com/questions/3595108/$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="http://stackoverflow.com/images/ecyu2wwn.gif" height="48" width="48">'; echo '</div>'; echo '<div class="microblogposttext">'; echo '<p>'; echo '<b class="pink"><a href="http://stackoverflow.com/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>\[/code\]
How can I make my php pagination paginate via Jquery AJAX
- Thread starter lhl23
- Start date