DataTables
HTML
<link rel="stylesheet" href="//cdn.datatables.net/1.12.0/css/jquery.dataTables.min.css">
<script src="//cdn.datatables.net/1.12.0/js/jquery.dataTables.min.js"></script>
<p>
<label>Product Type</label>
<select id='dd_product'>
<option></option>
<option value='100'>Indoor</option>
<option value='200'>Outdoor</option>
<option value='300'>Electronics</option>
</select>
</p>
<table id="table">
<thead>
<tr>
<th>Product</th>
<th>Price</th>
</tr>
</thead>
<tbody>
<tr data-product-id='100'><td>Wrench</td><td>$ 12</td></tr>
<tr data-product-id='200'><td>Shovel</td><td>$ 25</td></tr>
<tr data-product-id='300'><td>Multimeter</td><td>$ 68</td></tr>
<tr data-product-id='100'><td>Hammer</td><td>$ 17</td></tr>
<tr data-product-id='200'><td>Fertilizer</td><td>$ 22</td></tr>
<tr data-product-id='300'><td>S-100 Backplane</td><td>$ 41</td></tr>
</tbody>
</table>
JavaScript
var $tbl = $('#table');
var tbl = $tbl.DataTable({"ordering":false});
$('#dd_product').change(function () {
let value = $(this).val();
console.log(`Filtering for ${value}.`);
//
// Create Array of the Product #'s
//
let aProduct_Ids = $('tbody tr', $tbl).map(function (index, ele) {
return ele.getAttribute('data-product-id');
}).toArray();
console.table(aProduct_Ids);
console.log(`Found ${aProduct_Ids.length} rows.`)
$.fn.dataTable.ext.search.push(
function (settings, data, dataIndex) {
//
// If this Row matches our Product # Filter, leave it visible.
//
if( value === '') {
return true;
}
if (aProduct_Ids[dataIndex] == value)
return true;
}
);
tbl.draw();
$.fn.dataTable.ext.search.pop(); // remove this "filter"
});