I have a page with a menu of categories and subcategories of products. Categories have a class 'category' and subcategories have a class 'subcategory'. When either is clicked some AJAX sends the category to some php to compile the html which the AJAX then sends back to the page to populate a div. This part works fine.

There is a function in the code to split the returned records. So say there are 6 records and the page is to show 2 at a time then there are 3 pages. I get the correct amount of pages displayed(1 2 3) but all 6 records displayed on each!

Can anyone see the problem?

$('a.category, a.subcategory').click(function(e) {
    e.preventDefault();
    // get the class of the link
    var linkClass = $(this).attr("class");
    //get the text of the link by converting the clicked object to string
    var linkText = new String(this);
    // the value after the last / is the category ID
    var categoryValue = linkText.substring(linkText.lastIndexOf('/') + 1);
    // put the post parameters into 'params' to pass through the AJAX post request
    var params = {};
    params[linkClass] = categoryValue;  
    // send the category ID to the showproducts.php script using jquery ajax post method
    // send along a category ID
    // on success insert the returned text into the chosen div
    $.post('../inc/showproducts.php', params, function(data) {
        var totalRecords = $(data).length;
        var pageSize = 2
        var numOfPages = Math.ceil(totalRecords / pageSize);
        //make page links
        var i,
          pageLinks = '<div class="pageLinks">';
        for (i = 0; i < numOfPages; i++) {
          pageLinks += '<a href="#" onclick="showProductPage(' + i + ');return false;">' + (i + 1) + '<\/a> ';
        }
        pageLinks += '<\/div>';
        //display returned data and page links in chosen div (.showproduct)
        $('.showproduct').html(pageLinks + data);
        showProductPage(0);
    });
});
//function to slice up records into pages
function showProductPage( pageNo ) {
    var perPage = 2; T
    var start = pageNo * perPage; 
    var end = start + perPage; 
    $('.image').hide().filter(function(index) { 
        return ( (index > (start-1)) && ( index < end ) ); 
    } ).show(); 
}

Thanks for looking...............

The function showProductPage is fine.
Post one example of the data content.

One thing, you don't need '<\/div>', just '</div>' is fine.

Hi,wat do you mean by data content? Is it the categories and subcategories IK'm post, or the products I'm returning??

Sorry if I'm being obtuse here!

The returned products. What does the var data hold?

This is my showproducts file

include 'connect.php';
   if(isset($_POST['category'])){
      // cast the category to integer (just a little bit of basic security)
      $cat = (int) $_POST['category'];
      $q = "SELECT * FROM products WHERE cat=$cat ORDER BY id DESC";
      $result = $link->query($q);
      $returnHtml = '';

         while($row = mysqli_fetch_array($result)) {

        $returnHtml .= "<div class='product'>"; 
        $returnHtml .= "<a href='products.php' target='_blank''>";
        $returnHtml .= "<img class='nailthumb-container'";
        $returnHtml .= "src='{$row['image']}' ";;
        $returnHtml .= "alt='{$row['name']}' ";
        $returnHtml .= "title='{$row['name']}' />";
        $returnHtml .= "</a>";
        $returnHtml .= "<div class='imgLabel'>{$row['name']}</div>";
        $returnHtml .= "<div class='imgLabel'>&pound {$row['price']}</div></div>";

         }
       }

   else if(isset($_POST['subcategory'])){
      // cast the category to integer (just a little bit of basic security)
      $subcat = (int) $_POST['subcategory'];
      $q = "SELECT * FROM products WHERE subcat=$subcat ORDER BY id DESC";
      $result = $link->query($q);
      // this will be the string that you will return into the product-data div
      $returnHtml = '';

         while($row = mysqli_fetch_array($result)) {

        $returnHtml .= "<div class='product'>";  
        $returnHtml .= "<a href='products.php' target='_blank''>";
        $returnHtml .= "<img class='nailthumb-container'";
        $returnHtml .= "src='{$row['image']}' ";;
        $returnHtml .= "alt='{$row['name']}' ";
        $returnHtml .= "title='{$row['name']}' />";
        $returnHtml .= "</a>";
        $returnHtml .= "<div class='imgLabel'>{$row['name']}</div>";
        $returnHtml .= "<div class='imgLabel'>&pound {$row['price']}</div></div>";

         }
       }
   else{
        print_r($_POST);
        die('No category has been chosen'); 
   }
   echo $returnHtml;

The problem is that you are using the selector .image but it doesn't exist on your html.

Try this

function showProductPage( pageNo ) {
    var perPage = 2; T
    var start = pageNo * perPage; 
    var end = start + perPage; 
    $('.showproduct').find("div.product").hide().filter(function(index) { 
        return ( (index > (start-1)) && ( index < end ) ); 
    } ).show(); 
}

Hi Glenn,

Not actually answering your question but just offering some advice.

Move your if/else to the top and then you'll only need one block of html.

Thanks for that AleMonteiro but its still showing all the records on one page!

Put an alert($('.showproduct').find("div.product").length); on the showProductPage function and see what it says.

I finally figured it out when you prompted me by sayin .image wasnt in my html. I used this for another site where .image was there, I should have been usiing the selector .product! Feel very silly now!!!