There's probably a more elegant way to do this as a JQuery & DataTables plug-in, but this is simple and works.
Here is the HTML for a table:
<table style="width:100%;border-collapse:collapse;border:solid 1px black;">
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
</tr>
</thead>
<tbody>
<tr data-region="1" data-subregion="a">
<td>Region 1</td>
<td>Sub-Region A</td>
</tr>
<tr data-region="1" data-subregion="b">
<td>Region 1</td>
<td>Sub-Region B</td>
</tr>
<tr data-region="2" data-subregion="a">
<td>Region 2</td>
<td>Sub-Region A</td>
</tr>
<tr data-region="2" data-subregion="b">
<td>Region 2</td>
<td>Sub-Region B</td>
</tr>
<tr data-region="2" data-subregion="c">
<td>Region 2</td>
<td>Sub-Region C</td>
</tr>
<tr data-region="3" data-subregion="a">
<td>Region 3</td>
<td>Sub-Region A</td>
</tr>
</tbody>
</table>
Configure the DataTables and add your custom elements for filtering.
$(document).ready(function(){
// Execute the DataTables API on the table(s)
$('table').DataTable();
// give the DataTables API a moment to finish drawing elements to the DOM
setTimeout(function(){
// Just adding some Dropdown lists, but you can add a custom search box
// this first one filters by the data-region attribute
var regionFilter = $('<select data-filter="region">'
+ '<option value="0">All Regions</option>'
+ '<option value="1">Region 1</option>'
+ '<option value="2">Region 2</option>'
+ '<option value="3">Region 3</option>'
+ '</select>');
// this second one filters by the data-subregion attribute
var subregionFilter = $('<select data-filter="subregion">'
+ '<option value="0">All Sub-Regions</option>'
+ '<option value="a">Sub-Region A</option>'
+ '<option value="b">Sub-Region B</option>'
+ '<option value="c">Sub-Region C</option>'
+ '</select>');
// prepend the dropdown lists into the dataTables_filter container
// optionally, you can overwrite the default search box that the DataTables API places here
$('.dataTables_filter').prepend(regionFilter);
$('.dataTables_filter').prepend(subregionFilter);
// give your own HTML a moment to draw to the DOM
setTimeout(function(){
// configure the selection to trigger the filter action
$('select[data-filter]').on('change', function(){
// the <select> element has a data-filter attribute which defines which attribute to search the table for
var dataFilter = $(this).attr('data-filter');
var keyword = $('select[data-filter="' + dataFilter + '"] option:selected').val();
// execute the search
searchDataAttributes(dataFilter, keyword);
});
}, 300);
}, 400);
});
Create your own search implementation
// This search is very simple - you can implement any type of search you like
function searchDataAttributes(attribute, keyword) {
// put together the attribute to search
var dataAttribute = 'data-' + attribute;
// the value 0 is being used to show all
if (keyword=='0') {
$('tbody tr').show();
return true;
}
// if the keyword is not 0, then look at the attributes of each row in the table
$('tbody tr').each(function(){
var attributeValue = $(this).attr(dataAttribute);
// if the value of the attribute in the row matches the value of the keyword, then show the row
if (attributeValue==keyword) {
console.log('show');
$(this).show();
} else {
console.log('hide');
$(this).hide();
}
});
}
This is a simple dropdown list filter. You can replace the search box with your own custom search box that searches the way you want it to. You don't have to let DataTables draw their search box at all if you don't want to. This is just one way of getting around the limits of the DataTables out of the box.
