Pagination links do not work after first page
- by TheStack
Hello, I am trying to fix this pagination script. It seems when I click on the pagination links [1][2][3][4]or[5] , it doesn't work. It just shows the first page and when clicking on the next numbers nothing happens. I hoping someone can see something in the script that I can not see.
The main page looks like this (pagination.php):
<?php
include_once('generate_pagination.php');
?>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script type="text/javascript" src="jquery_pagination.js"></script>
<div id="loading" ></div>
<div id="content" data-page="1"></div>
<ul id="pagination">
<?php generate_pagination() ?>
</ul>
<br />
<br />
<a href="#" class="category" id="marketing">Marketing</a>
<a href="#" class="category" id="automotive">Automotive</a>
<a href="#" class="category" id="sports">Sports</a>
Then, generate_pagination.php:
<?php
function generate_pagination($sql) {
include_once('config.php');
$per_page = 3;
//Calculating no of pages
$result = mysql_query($sql);
$count = mysql_fetch_row($result);
$pages = ceil($count[0]/$per_page);
//Pagination Numbers
for($i=1; $i<=$pages; $i++)
{
echo '<li class="page_numbers" id="'.$i.'">'.$i.'</li>';
}
}
$ids=$_GET['ids'];
generate_pagination("SELECT COUNT(*) FROM explore WHERE category='$ids'");
?>
Here is the jquery file (jquery_pagination.js):
$(document).ready(function(){
//Display Loading Image
function Display_Load()
{
$("#loading").fadeIn(900,0);
$("#loading").html("<img src='bigLoader.gif' />");
}
//Hide Loading Image
function Hide_Load()
{
$("#loading").fadeOut('slow');
};
//Default Starting Page Results
$("#pagination li:first").css({'color' : '#FF0084'}).css({'border' : 'none'});
Display_Load();
$("#content").load("pagination_data.php?page=1", Hide_Load());
//Pagination Click
$("#pagination li").click(function(){
Display_Load();
//CSS Styles
$("#pagination li")
.css({'border' : 'solid #dddddd 1px'})
.css({'color' : '#0063DC'});
$(this)
.css({'color' : '#FF0084'})
.css({'border' : 'none'});
//Loading Data
var pageNum = this.id;
$("#content").load("pagination_data.php?page=" + pageNum, function(){
Hide_Load();
$(this).attr('data-page', pageNum);
});
});
// Editing below.
// Sort content Marketing
$("a.category").click(function() {
Display_Load();
var this_id = $(this).attr('id');
$.get("pagination.php", { category: this.id },
function(data){
//Load your results into the page
var pageNum = $('#content').attr('data-page');
$("#pagination").load('generate_pagination.php?category=' + pageNum +'&ids='+ this_id );
$("#content").load("filter_marketing.php?page=" + pageNum +'&id='+ this_id, Hide_Load());
});
});
});
Lastly, filter_marketing.php (when a user clicks the filter link buttons):
<?php
include('config.php');
$per_page = 3;
if(count($_GET)>0)
{
if($_GET['page']!=''){
$page=$_GET['page'];
}
if($_GET['id']!=''){
$id=$_GET['id'];
}
}
$page= ($_GET['page']!='') ? $_GET['page']: false;
$id= ($_GET['id']!='') ? $_GET['id']: false;
$start = ($page-1)*$per_page;
if($page && $id){
$sql = "SELECT * FROM explore WHERE category='$id' ORDER BY category LIMIT $start,$per_page";
}
else
{
die('Error: missing parameters. Id= '.$id.' and page= '.$page);
}
$result = mysql_query($sql);
?>
<table width="800px">
<?php
while($row = mysql_fetch_array($result))
{
$msg_id=$row['id'];
$message=$row['site_description'];
$site_price=$row['site_price'];
?>
<tr>
<td><?php echo $msg_id; ?></td>
<td><?php echo $message; ?></td>
<td><?php echo $site_price; ?></td>
</tr>
<?php
}
?>
</table>
So, if anyone sees where the problem is occurring and can help rid of the problem, that would be great, Thank you.
