Jquery Datatables

Steps:Suppose you have a jquery datatable named category_products. The table has 5 columns with names like Foto,Product Name, Product Description, SubCategory, Price Also we have created a hidden column with the popularity of each product.We want to create a combobox that sorts the table on the change of the options.What you have to do is really very simple. Just follow the steps below:1. Insert into your html code the combobox with your choices
<form id="someform">
<select id="sample" onchange="sortselected(this)">
<option>Most Popular</option>
<option>From expensive --> cheap</option>
<option>From cheap --> expensive</option>
</select>
</form>

2. Create the javascript sortselected()
<script type="text/javascript" charset="utf-8">
function sortselected(selectobj){
var oTable = $('#category_products').dataTable();
if(selectobj.selectedIndex == 0) oTable.fnSort( [ [5,'desc'] ] ); //the hidden column (product popularity)
if(selectobj.selectedIndex == 1) oTable.fnSort( [ [3,'desc'] ] ); //the price column descending
if(selectobj.selectedIndex == 2) oTable.fnSort( [ [3,'asc'] ] ); //the price column ascending }
</script>

3. Enjoy!

Σχόλια

Δημοφιλείς αναρτήσεις