We are currently working on a web-based CRM. The project is going great except for a frustrating issue.
we are using the DataTable jQuery plug-in for almost every sortable tables in the application. Here is a list of active incidents.
As you can see, the third column represents the type of the incidents (ticket, change request, service request, etc.)
Users requested a filter box placed on top of the previous table to filter the incidents types. For instance, if you choose Ticket only, every other type will be hidden. Up until now, everything is working.
In order to do so, every row has a CSS class that represents the incident type.
- Row #1 : class=ticket
- Row #2 : class=changeRequest
When the filter box value changes, the following javascript code is executed
$('table.sortable').each(function() {
for (var i = 0; i < rows.length; i++) {
if ($(rows[i]).hasClass(vClass)) $(rows[i]).hide();
}
});
where
- vClass = The CSS class representing the incident type
- rows = All dataTable rows, got from $(SomeDatatable).dataTable().fnGetNodes();
- $('table.sortable') = All dataTables
Now, fasten your seatbelts (French liner). When you implicitly hide a row, dataTable still counts it.
Here is the fabulous result.
That being explained, there goes the main question :
How am I supposed to tell dataTable that I want to hide rows without deleting them forever? DataTable already has a filter box but I need it to work independently along with the type filter box (not in image).
Is there a way to add a second filter, maybe?