Continuing the discussion from Use AJAX to filter MySQL results with multiple checkbox option:
I have implemented the code posted by you and is working fine with all the filter options. But facing one problem that I have pagination on this page which is not working. How to make pagination work on this page ?
Below is my code which I have used :
submit.php
<?php
$pdo = new PDO('mysql:host=localhost;dbname=shopping', 'root', '');
$opts = $_POST['filterOpts'];
$qMarks = str_repeat('?,', count($opts) - 1) . '?';
$statement = $pdo->prepare("SELECT Image, Product_Name, Price, Prod_ID FROM products WHERE Sub_Cat_ID IN ($qMarks)");
$statement -> execute($opts);
$results = $statement -> fetchAll(PDO::FETCH_ASSOC);
$json = json_encode($results);
echo($json);
?>
product_view.php
<!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>sanjay</title>
<link rel="stylesheet" type="text/css" href="css/style s.css" />
<link rel="stylesheet" type="text/css" href="jcarousel/style.css">
<link href="css/pagination.css" rel="stylesheet" type="text/css" />
<link href="css/B_blue.css" rel="stylesheet" type="text/css" />
<script language="javascript">
function addtocart(pid){
document.form1.productid.value=pid;
document.form1.command.value='add';
document.form1.submit();
}
</script>
<?php
require_once 'db_connect.php';
include("includes/functions.php");
include_once ('functions.php');
if(isset($_REQUEST['command'])){
if($_REQUEST['command']=='add' && $_REQUEST['productid']>0){
$pid=$_REQUEST['productid'];
addtocart($pid,1);
}
}
$page = (int) (!isset($_GET["page"]) ? 1 : $_GET["page"]);
$limit = 12;
$startpoint = ($page * $limit) - $limit;
//to make pagination
$statement = "`products`";
?>
</head>
<body>
<div class="wapper">
<div class="header">
<?php include('header_new.php'); ?>
</div>
<div class="content">
<div class="row-3">
<div class="colam-p">
<div class="item-row-top-menu">
<a href="index.php">Home</a> > <b>All products</b>
</div>
<div class="item-row">
<div class="wrap1">
<form name="form1">
<input type="hidden" name="productid" />
<input type="hidden" name="command" />
</form>
<table id="phones">
<tbody>
</tbody>
</table>
</div>
<div class="wrap2">
<div align="center">
<?php
echo pagination($statement,$limit,$page);
?>
</div>
</div>
</div></div>
<div class="right-colum-p">
<div class="ful-border5">
<h2 class="food-cold-btn">Filter Products</h2>
<div class="image-box5">
<ul>
<li><input type="checkbox" id="1"> Dosa</li>
<li><input type="checkbox" id="2"> Idli</li>
<li><input type="checkbox" id="3"> Vada</li>
<li><input type="checkbox" id="4"> Uthappam</li>
<li><input type="checkbox" id="5"> Rice</li>
<li><input type="checkbox" id="6"> Starters</li>
<li><input type="checkbox" id="7"> Bread</li>
<li><input type="checkbox" id="8"> Main Course</li>
<li><input type="checkbox" id="9"> Biryani & Rice</li>
<li><input type="checkbox" id="10"> Dessert</li>
<li><input type="checkbox" id="11"> Salad/Raita</li>
<li><input type="checkbox" id="12"> North Indian Combo</li>
<li><input type="checkbox" id="13"> South Indian Combo</li>
<li><input type="checkbox" id="14"> Sandwiches</li>
<li><input type="checkbox" id="23"> Burger</li>
<li><input type="checkbox" id="31"> Pasta</li>
<li><input type="checkbox" id="0"> Chinese</li>
<li><input type="checkbox" id="0"> Beverage</li>
<li><input type="checkbox" id="0"> Pizza</li>
</ul>
</div></div></div>
</div>
</div>
<?php include('footer.php'); ?>
</div><!--wapper-->
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
function makeTable(data){
var tbl_body = "";
$.each(data, function() {
var tbl_row = "",
currRecord = this;
$.each(this, function(k , v) {
if(k==='Image'){
v = "<div class='innerimagediv'>"+"<img height="+103+" width="+175+" src='images1/"+v+"'>" + "</div>";
} else if (k==='Price'){
v = "<div class='pu-border-top'>"+"<div class='productcontent'>"+"<font size=3 color=#66C>"+"<B>"+"Rs. "+"</B>"+"</font>"+"<B>"+v+"</B>"+"</div>"+"</div>";
}
else if (k==='Product_Name'){
v = "<div class='pu-border-top'>"+"<div class='productcontent'>"+"<B>"+v+"</B>"+"</div>"+"</div>";
}
else if (k==='Prod_ID'){
v = "";
}
tbl_row += "<li>"+v+"</li>";
})
tbl_body += "<div class='productbox'>"+"<ul>"+tbl_row+"</ul>"+"<a href='product_display.php?prod_id=" + currRecord['Prod_ID'] +"'" + "title='"+"Click For View Detail"+"'>"+"<img src='images1/"+"learn_more1.png"+"'>"+"</a>"+"<br>"+"<a href='#'"+ "onclick='addtocart(" + currRecord['Prod_ID'] +")'"+">"+"<img class='buy' src='images1/buy-now.png'>"+"</a>"+"</div>";
})
return tbl_body;
}
function getPhoneFilterOptions(){
var opts = [];
$checkboxes.each(function(){
if(this.checked){
opts.push(this.id);
}
});
return opts;
}
function updatePhones(opts){
if(!opts || !opts.length){
opts = allBrands;
}
$.ajax({
type: "POST",
url: "submit.php",
dataType : 'json',
cache: false,
data: {filterOpts: opts},
success: function(records){
$('#phones tbody').html(makeTable(records));
updatePrices();
}
});
}
function updatePrices(){
var subsidyTotal = Number($("#total").text());
$(".price").each(function(){
var origVal = Number($(this).text())
$(this).text(origVal - subsidyTotal)
})
}
var $checkboxes = $("input:checkbox");
$checkboxes.on("change", function(){
var opts = getPhoneFilterOptions();
updatePhones(opts);
});
$("#apply").on("click", function(){
if(subsidyIsValid()){
$(this).prop("disabled", true);
$(this).next().prop("disabled", false);
updatePrices();
} else {
alert("Subsidy invalid!")
}
});
$("#remove").on("click", function(){
$("#amount1").val("");
$("#amount2").val("");
$("#total").text("0");
$(this).prop("disabled", true);
$(this).prev().prop("disabled", false);
$checkboxes.trigger("change");
});
var allBrands = [];
$("input[type=checkbox]").each(function(){
allBrands.push($(this)[0].id)
})
updatePhones();
updatePrices();
</script>
</body>
</html>