Filter content from mysql db with checkboxes using jQuery?
I'm new to jquery and php and I'm having trouble doing this...
I have a php webpage that gathers content from a mysql table. I want to be able to filter through this content with some checkboxes, but have no idea how to create the checkbox jquery code and for it to get the selected or checked results back from the database to display on the page.
Any help on this would be amazing.
I'll post the entire script below so you can see what I mean. I'm finding it pretty difficult to select(check) a box and then send the id to the sql query. So if I only check the 'automotive' box, the page will only display results from the automotive category.
Script (I have hardcoded 'automotive' in the query, the script does not work):
<?php
$ids=$_GET['id'];
echo $ids;
?>
<!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>SUPERMAN</title>
<link href="../style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script type="text/javascript" >
$(document).ready(function() {
$(":checkbox").change(function(){
});
});
</script>
</head>
<body>
<div class="check_filter">
<div id="filter">
<input name="marketing" type="checkbox" id="marketing" /><label for="marketing">Marketing</label>
<input name="automotive" type="checkbox" id="automotive" /><label for="automotive">Automotive</label>
<input name="sports" type="checkbox" id="sports" /><label for="sports">Sports</label>
</div>
</div><!-- End check_filter -->
<?php
include('connect.php');
$tableName="explore";
$targetpage = "index.php";
$limit = 10;
$query = "SELECT COUNT(*) as num FROM $tableName WHERE category='$ids'";
$total_pages = mysql_fetch_array(mysql_query($query));
$total_pages = $total_pages[num];
$stages = 3;
$page = mysql_escape_string($_GET['page']);
if($page){
$start = ($page - 1) * $limit;
}else{
$start = 0;
}
// Get page data ".$_POST["id"]."
//$query1 = "SELECT * FROM $tableName LIMIT $start, $limit";
$query1 = "SELECT * FROM explore WHERE category='automotive' ORDER BY category LIMIT $start, $limit";
$result = mysql_query($query1);
// Initial page num setup
if ($page == 0){$page = 1;}
$prev = $page - 1;
$next = $page + 1;
$lastpage = ceil($total_pages/$limit);
$LastPagem1 = $lastpage - 1;
$paginate = '';
if($lastpage > 1)
{
$paginate .= "<div class='paginate'>";
// Previous
if ($page > 1){
$paginate.= "<a href='$targetpage?page=$prev'>previous</a>";
}else{
$paginate.= "<span class='disabled'>previous</span>"; }
// Pages
if ($lastpage < 7开发者_开发问答 + ($stages * 2)) // Not enough pages to breaking it up
{
for ($counter = 1; $counter <= $lastpage; $counter++)
{
if ($counter == $page){
$paginate.= "<span class='current'>$counter</span>";
}else{
$paginate.= "<a href='$targetpage?&id=$ids&page=$counter'>$counter</a>";}
}
}
elseif($lastpage > 5 + ($stages * 2)) // Enough pages to hide a few?
{
// Beginning only hide later pages
if($page < 1 + ($stages * 2))
{
for ($counter = 1; $counter < 4 + ($stages * 2); $counter++)
{
if ($counter == $page){
$paginate.= "<span class='current'>$counter</span>";
}else{
$paginate.= "<a href='$targetpage?page=$counter'>$counter</a>";}
}
$paginate.= "...";
$paginate.= "<a href='$targetpage?page=$LastPagem1'>$LastPagem1</a>";
$paginate.= "<a href='$targetpage?page=$lastpage'>$lastpage</a>";
}
// Middle hide some front and some back
elseif($lastpage - ($stages * 2) > $page && $page > ($stages * 2))
{
$paginate.= "<a href='$targetpage?page=1'>1</a>";
$paginate.= "<a href='$targetpage?page=2'>2</a>";
$paginate.= "...";
for ($counter = $page - $stages; $counter <= $page + $stages; $counter++)
{
if ($counter == $page){
$paginate.= "<span class='current'>$counter</span>";
}else{
$paginate.= "<a href='$targetpage?page=$counter'>$counter</a>";}
}
$paginate.= "...";
$paginate.= "<a href='$targetpage?page=$LastPagem1'>$LastPagem1</a>";
$paginate.= "<a href='$targetpage?page=$lastpage'>$lastpage</a>";
}
// End only hide early pages
else
{
$paginate.= "<a href='$targetpage?page=1'>1</a>";
$paginate.= "<a href='$targetpage?page=2'>2</a>";
$paginate.= "...";
for ($counter = $lastpage - (2 + ($stages * 2)); $counter <= $lastpage; $counter++)
{
if ($counter == $page){
$paginate.= "<span class='current'>$counter</span>";
}else{
$paginate.= "<a href='$targetpage?page=$counter'>$counter</a>";}
}
}
}
// Next
if ($page < $counter - 1){
$paginate.= "<a href='$targetpage?page=$next'>next</a>";
}else{
$paginate.= "<span class='disabled'>next</span>";
}
$paginate.= "</div>";
}
echo $total_pages.' Results';
// pagination
echo $paginate;
?>
<ul id="pagination">
<?php
while($row = mysql_fetch_array($result))
{
echo '<li>'.$row['site_name'].'</li>';
}
?>
</ul>
</body>
</html>
Here's some sample code to get you started:
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" />
<script>
$(document).ready(function(){
$("#test").click(function()
{
if ($(this).is(":checked"))
{
$("#example").hide();
}else{
$("#example").show();
}
});
});
</script>
</head>
<body>
<input type="checkbox" id="test"/>
<div id="example">Hide Show</div>
</body>
</html>
You should really read up on jQuery to get an understanding of what's going one, but to get you started:
This piece $("whatever") - is called the selector. Basically, it's how you find what you're looking for in the DOM.
$("#whatever")gets an item by its ID$(".whatever")gets an item(s) by its class name$("whatever")gets an item(s) by its node$(whatever)usually used for selecting something special like "document" or "window"
After you've found the item you want, then you can add on events or call methods. That's everything after $("whatever").
Please realize this is a super basic summary, so please read up on it when you get a chance.
加载中,请稍侯......
精彩评论