filter based on multiple drop menus to filter & sort data from php mysql query

[buxboy4]

I got no idea how to create a filter based on multiple drop menus to filter & sort data from php mysql query. Can anyone help me to write javascipt for this problem?

My php mysql query as below:-
mysql_select_db($database_winwin, $winwin);
$query_rsMobile = "SELECT product_detail.product_Id, product_detail.product, product_detail.product_category, product_detail.product_brand, product_detail.product_name, product_detail.product_price, product_detail.thumbnail_url, product_detail.product_url, product_detail.product_status, product_detail.commission, product_detail.product_added_date FROM product_detail WHERE product_detail.product='Mobile Devices' AND product_detail.product_status='For sales'";
$rsMobile = mysql_query($query_rsMobile, $winwin) or die(mysql_error());
$row_rsMobile = mysql_fetch_assoc($rsMobile);
$totalRows_rsMobile = mysql_num_rows($rsMobile);

Whereby:-
Product Brand: product_brand
Product price: product_price
Commission: commission
Product name: product_name
Product Thumbnail: thumbnail_url
Product URL: product_url

HTML for filters & sorter:-
<div id="filters">
<form action="" method="post" name="form_filters" id="form_filters">
<table width="750" border="0">
<tr>
<td>Brand:</td>
<td><select name="productBrand" id="productBrand">
<option value="All Brands">All Brands</option>
<option value="Sony Ericsson">Sony Ericsson</option>
<option value="Samsung">Samsung</option>
<option value="Nokia">Nokia</option>
</select></td>
<td>Price:</td>
<td><select name="priceRange" id="priceRange">
<option value="All Price">All Price</option>
<option value="Below RM1000">Below RM1000</option>
<option value="RM1000-RM1999">RM1000-RM1999</option>
<option value="RM2000 & Above">RM2000 & Above</option>
</select></td>
<td>Sort by:</td>
<td><select name="productSort" id="productSort">
<option value="Sort By Name">Name</option>
<option value="Sort By Price">Price</option>
</select></td>
<td><input name="Apply Filters" type="submit" value="Apply Filters"/></td>
<td><input name="Reset Filters" type="Reset" value="Reset Filters"/></td>
</tr>
</table>
</form>
</div>

Once user click on "Apply Filters" javascript has to sort list the product items.

HTML for Pager (Value for total items, display some page numbers with hyperlink (1,2,3....10,11,12), hyperlink to previous page, hyperlink to next page) :-

<div id="pager">
No. of items per page:
<select name="NumOfItem" id="NumOfItem">
<option value="20">20</option>
<option value="50">50</option>
<option value="100">100</option>
</select>
Total Item:
Pages ...
Next...
Previous
</div>

Javascript has to manage pager column.

HTML for Product display:-
<div id="product">
<div id="Thumbnail">
Here Javascript has to display Thumbnail image based on filters & sorter drop menus inputs. When click on this image page must redirect to "Product URL".
</div>
<div id="Price">
Here Javascript has to display "Price" based on filters & sorter drop menus inputs. When click on this "Price" page must redirect to "Product URL".
</div>
<div id="Commission">
Here Javascript has to display "Commission" image based on filters & sorter drop menus inputs. When click on this "Commission" page must redirect to "Product URL".
</div>
</div>

Javascript has to repeat regions (<div id="product"></div>)based on "NumOfItem" drop menu (number of items display per page) and also update the pager column