PHP/Jquery Pagination Issues

Question

I am new in php & jquery I am working on online sales and marketing project. In my index page visitor select one category and in product detail area shows all products relating to this category. For this purpose I create a pagination in php, pview.php page work fine when i run it stand alone, but when I pass category value through jquery it shows page 1 but other pages not appear, if visitor click on category show products with pagination but "when he goes to second page all products disappear from product detail area." How can I remove this issue? Please anyone help me to eliminate this issue. At the end of codes I place links of my online project please check it and suggest me.

pview.php

<?php
include'connect.php';
if(isset($_POST['catValue'])){
    $catVal = $_POST['catValue'];
}else{
    echo'No Product Found.';
    exit();
}


$per_page = 3;
$pages_query = mysql_query("SELECT COUNT(id) FROM product_s WHERE product_cat='".$catVal."'");
$pages = ceil(mysql_result($pages_query, 0) / $per_page);
$page = (isset($_GET['page'])) ? (int) $_GET['page'] : 1;
$start = ($page -1) * $per_page;
$query = mysql_query("SELECT * FROM product_s LIMIT $start, $per_page");
echo'<table cellpadding="0" cellspacing="0" style="width:100%;">';
while($result = mysql_fetch_assoc($query)){ 
echo'
      <tr>
        <td>
          <table border="0">
            <tr>
              <td style=" text-decoration:none; font-size:30px;"><a href="#">'.$result['product_name'].'</a></td>
              <td style="font-size:15px;"><i>(PKR '.number_format($result['product_rate'],2).')</i></td>
            </tr>
          </table>
        </td>
      </tr>
      <tr>
        <td>'.$result['product_pack'].'</td>
      </tr>
      <tr>
        <td>'.$result['product_desc'].'</td>
      </tr>
      <tr>
        <td id="proCompName"><a href="#"><i>'.$result['product_comp_name'].'</i></a></td>
      </tr>
    ';
}
echo'</table>';

if($page >=1 && $page <= $pages){
  for($x =1; $x<=$pages; $x++){
      echo ($x == $page) ? '<strong><a href="?page='.$x.'">'.$x.'</a></strong> ' : '<a href="?page='.$x.'">'.$x.'</a> ';
  }
}

?>

JS Codes:

<script src="../java/jQueryLibrary/jQuery-1.9.1/jquery-1.9.1.js"></script>
<script type="text/javascript">
$(document).ready(function() {
  $('table #CatClass').mouseover(function(){
    $(this).addClass('CatClass');     
  }).mouseleave(function(){
    $(this).removeClass('CatClass');
  });

  $('table #CatClass').click(function(){
      var catValue = $(this).text();

    $.post('corporate/pview.php', {catValue: catValue}, function(data){
        $('#ProductDetail').html(data);
    });  
  });
});
</script>

Please select Cooking & Foods Category for live demo.

http://www.cloudmarket.pk/php/index.php

Answer 1

Your pager link should not be a link to next page. It should have an ajax action to get new data, something like that

<a href="#" onClick="javascript: return GoPage('cat_name', 2);">2</a>