Ajax pagination on a div

glenr · #1 (**permalink**) 01-31-13, 04:51 PM

Hi.

I have a php file with a div that contains image links(from a mysql table). This page has some ajax code that sends the product_id of the clicked image to another php file that gets all the products from another table that have the same product_id then sends them back to the first file to display in another div. I have this working. I need to add pagination to this div now, to break up the results.

I have no clue on how to do this! Can anyone help?

This is my first file with the 2 divs and the ajax
index.php

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>
   
   <link href="../css/template.css" rel="stylesheet" type="text/css" />
   <link href="../css/cat_image.css" rel="stylesheet" type="text/css" />
   <link href="../css/index.css" rel="stylesheet" type="text/css" />
   
   <script src="../jquery/jquery.js"></script>
   <script type="text/javascript" src="../jquery/jquery.simplePagination.js"></script>
   
   
   <title>Adult Toys</title>
</head>

   <body>
      <div class="wrap">
	     <div id="header">
		    <div id="logo">
               <a href="home.php"><img src="../images/siteimages/logo.gif" alt="Logo image" /></a>
            </div> 
		 </div>
		  <div id="menu">
	         <div id='cssmenu'>
			   <ul>  
				     <li><a href='home.php'><span>Home</span></a></li>
                     <li><a href='forher.php'><span>For Her</span></a> </li>
                     <li><a href='forhim.php'><span>For Him</span></a></li>
                     <li><a href='couples.php'><span>For Couples</span></a></li>
         	         <li><a href='anal.php'><span>Anal Delights</span></a></li>
					 <li><a href='stimulators.php'><span>Massagers/Stimulators</span></a></li>
         	         <li><a href='lubes.php'><span>Lubes and Oils</span></a></li>
					 <li><a href='novelty.php'><span>Novelty</span></a></li>
					 <li><a href='clothing.php'><span>Clothing</span></a></li>
					 <li><a href='other.php'><span>Other</span></a></li>
			     </ul>
			  </div>
	       </div>
		 <div id="content">
		    <div class='categories'>
			
			   <?php
			   include'connect.php';
			   $q = "SELECT * FROM cat_images WHERE cat_id=1"; 
			  
			   if($r = mysql_query($q)){
			           
                       while($row=mysql_fetch_array($r)){
					   
                          echo "<div class='image'>
                                <a href='{$row['product_id']}' class='category'>
                                <img class='cat_image' name='cat_image' src='{$row['imagepath']}' alt='{$row['name']}.Image' title='{$row['name']}' />
                                <div class='imgLabel'>{$row['name']}
                                </div></a></div>";
                        }
                    }
                    else{
                       echo mysql_error();
                    }
			?>
		       <div style="clear: both;">&nbsp;</div>
			</div>
			<div id="info">
			Vibrators
			<script>
// whenever a link with category class is clicked
$('a.category').click(function(e) {
    // first stop the link to go anywhere
    e.preventDefault();
    // you can get the text of the link by converting the clicked object to string
    // you something like 'http://mysite/categories/1'
    // there might be other methods to read the link value
    var linkText = new String(this);
    // the value after the last / is the category ID
    var categoryValue = linkText.substring(linkText.lastIndexOf('/') + 1);
    // send the category ID to the getProductData.php script using jquery ajax post method
    // send along a category ID
    // on success insert the returned text into the product-data div
    $.post('showproducts.php', {category: categoryValue}, function(data) {
        $('#info').html(data);
		
    });
});
</script>
		   
			</div>
			
			
   
   
		</div>
		
		<div id="footer">
	       <p>Copyright of TrunxSexToys 2012<br />Site Developed by Webslinger Design and Development</p>
		</div>
     </div>
   </body>
</html>

showproducts.php

[CODE]<?php
include 'connect.php';

// if no category was sent, display some error message
if(!isset($_POST['category'])) {
die('No category has been chosen');
}

// cast the category to integer (just a little bit of basic security)
$category = (int) $_POST['category'];
// this will be the string that you will return into the product-data div
$returnHtml = '';
$q = "SELECT * FROM products WHERE product_id='$category' ORDER BY id DESC";
if($r = mysql_query($q)) {
// construct the html to return
while($row = mysql_fetch_array($r)) {
$returnHtml .= "<div class='image1'><a><img ";
$returnHtml .= "class='cat_image1' ";
$returnHtml .= "name='cat_image' ";
$returnHtml .= "src='{$row['imagepath']}'";
$returnHtml .= "alt='{$row['product_name']}' ";
$returnHtml .= "title='{$row['product_name']}' />";
$returnHtml .= "<div class='imgLabel1'>{$row['product_name']} <br />&pound {$row['price']}</div></a></div>";
}
}
// display the html (you actually return it this way)
echo $returnHtml;
?><?php
include 'connect.php';

// if no category was sent, display some error message
if(!isset($_POST['category'])) {
die('No category has been chosen');
}

// cast the category to integer (just a little bit of basic security)
$category = (int) $_POST['category'];
// this will be the string that you will return into the product-data div
$returnHtml = '';
$q = "SELECT * FROM products WHERE product_id='$category' ORDER BY id DESC";
if($r = mysql_query($q)) {
// construct the html to return
while($row = mysql_fetch_array($r)) {
$returnHtml .= "<div class='image1'><a><img ";
$returnHtml .= "class='cat_image1' ";
$returnHtml .= "name='cat_image' ";
$returnHtml .= "src='{$row['imagepath']}'";
$returnHtml .= "alt='{$row['product_name']}' ";
$returnHtml .= "title='{$row['product_name']}' />";
$returnHtml .= "<div class='imgLabel1'>{$row['product_name']} <br />&pound {$row['price']}</div></a></div>";
}
}
// display the html (you actually return it this way)
echo $returnHtml;
?>[/CODE

Thanks for looking!

Glen