Database filtering with javascript and AJAX - php

Question

I've been reading and watching a lot of tutorials about javascript, jquery and AJAX but I can't seem to understand how to make a 'filter' like these guys from unlim500 have.
Their script allows you to just click on a brand and then the table gets filtered and refreshed (without reloading the page).
Live example on this page, click on Все марки:
http://www.unlim500.ru/results/
Can anyone lead me into the right direction?
How can I make such a filter?
index.php =
<a id="bugatti_link" href="#" database_id="Bugatti">Bugatti</a>
<script>
$("#bugatti_link").click(load_ajax);
function load_ajax(e) {
var link = $(e.target);
var vehicle_database_id = link.attr("database_id");
var ajax_params = {"brand": vehicle_database_id};
$.getJSON("query2.php", ajax_params, success_handler)
}
function success_handler(data) {
//data variable contains whatever data the server returned from the database.
//Do some manipulation of the html document here. No page refresh will happen.
}
</script>
query2.php =
<?php
$host = "xx";
$user = "xx";
$db = "xx";
$pass = "xx";
$pdo = new PDO("mysql:host=" . $host . ";dbname=" . $db, $user, $pass);
$rows = array();
if(isset($_GET['brand'])) {
$stmt = $pdo->prepare("SELECT brand FROM cars WHERE brand = ? ");
$stmt->execute(array($_GET['brand']));
$rows = $stmt->fetchAll(PDO::FETCH_ASSOC);
}
echo json_encode($rows);
?>

Answer 1

The actual page you linked uses an anchor to create a link to some javascript. The way I have done this in the past (and imo a simpler way) is to make a link without href pointing to the same page (to avoid reload), and attach a click event to the link which will trigger your ajax call.
eg - HTML - the link to click
<a id="bugatti_link" href="#" database_id="2">Bugatti</a>
then in jquery
$("#bugatti_link").click(load_ajax);
function load_ajax(e) {
var link = $(e.target);
var vehicle_database_id = link.attr("database_id");
var ajax_params = {"id": vehicle_database_id};
$.getJSON("the/url/to/the/database/view", ajax_params, success_handler)
}
function success_handler(data) {
//data variable contains whatever data the server returned from the database.
//Do some manipulation of the html document here. No page refresh will happen.
}
On the server you'll receive a GET request to the/url/to/the/database/view which will have a parameter called "id" with the value of "2" so you can fetch vehicle at row 2 and return whatever data you wanted from that vehicle.
Hopefully that gives some insight into how to turn a regular link into an ajax loader, which can be used to update the page without reloading it.
Some useful links about this sort of thing:
jQuery ajax calls
and more useful for this sort of usage, jQuery getJSON

Answer 2

You can use a jquery plugin for the sorting functionality. One of which is the tablesorter plugin
All you have to do is to download jquery and tablesorter.js then include them in your page. The code below assumes that you have jquery and tablesorter on the same folder where you have the file that you're running:
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="tablesorter.js"></script>
Add an id to your table:
<table id="myTable">
Then use the tablesorter on document load:
<script>
$(function(){
$("#myTable").tablesorter();
});
</script>