32

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.

Open 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.

Datatable on drugs

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?

Improve this question
2
  • 1
    I can't answer you but you certainly get a vote from me for a very well detailed and explained question! Commented Jun 27, 2013 at 15:29
  • i am not familiar with the table jquery plugin but have you considered having this extra filter create a temporary "clone" of the original minus the lines that are not supposed to show and display it instead? it seems to me that hidden lines will still be counted as they are still in the DOM Commented Jun 27, 2013 at 15:39

3 Answers 3

Reset to default
23

You need to write a custom filter for that table. Example:

$.fn.dataTableExt.afnFiltering.push(function (oSettings, aData, iDataIndex) {
    if ($(oSettings.nTable).hasClass('do-exclude-filtering')) {
        return aData[16] == '' || $('#chkShowExcluded').is(':checked');
    } else return true;
});

In that example we dynamically add and remove the 'do-exclude-filtering' class to a table, and if it has the class, it checks each row to see if a given cell has a value. The logic can be anything you can dream up, just keep it fast (this is executed for every row, on every draw, for every table on the page (note it's added to a 'global' array in DT, not an individual instance)

Return true to include the row, return false to hide the row

Here is the datatable reference to use the afnFiltering capabilities: http://datatables.net/development/filtering

The advantage to this instead of using .fnFilter() is that this works ALONG WITH, so the user can still use the filtering box in the top right (by default, I see yours is bottom right) to further filter the results you choose to show them. In other words, say you hide all 'completed' items, so the user only sees 'incomplete' items in the table. Then they can still filter the table for 'laptop' and see only the rows that are BOTH incomplete and have 'laptop' in their description

Improve this answer
Sign up to request clarification or add additional context in comments.

7 Comments

What a complete answer that is. I just finished adapting the code you provided and it worked like a charm. Sir, you are my today hero. Thank you!
Glad you found it helpful, thanks for asking such a detailed question. Au revoir ;)
Is it possible to attach such filter only to a specific table?
I believe in 1.10 it will be. Unfortunately in earlier versions 1.9.4 and previous, the filtering functions live in a "static" array and are shared by all DataTables currently active in the DOM. That's the reason for the checking of a specific class on the table to apply filtering or not.
@BLSully - is there another way to apply custom filter to a specific table? From what I've gathered, it's just this, even today
|
2

DataTables offers this out of the box: DataTables individual column filtering example or, better still DataTables individual column filtering example (using select menus)

Improve this answer

Comments

2

I'm unable to help with the datatable part as I've never used it, but you can improve the javascript you run when the filter box changes to:

$('.table-sortable').find('tr.' + vClass).removeClass('hidden').addClass('show');
$('.table-sortable').find('tr:not(.' + vClass + ')').removeClass('hidden').addClass('show');

with appropriate css styling. Or you could do:

$('.table-sortable').find('tr.' + vClass).show();
$('.table-sortable').find('tr:not(.' + vClass + ')').hide();

If you try one of these approaches instead you may get lucky and circumvent the datatable issue, but either way I believe your code will be more efficient.

Improve this answer

1 Comment

Unfortunately, I won't be using this selector anymore. But I sure will be using this method from now on. +1 for noticing and sharing!

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.