Second level filter

dotBlip

I have been searching for a long time on how to answer this but I have had 0 luck. I was able to implement the column filter functionality with drop down boxes relatively easily. The data populates in the drop downs from the table dynamically and it works just like it is suppose to. However, I need the ability to filter one column, and then have the values of the other columns dropdowns change based on the filtered data from the first column.

So if some of the values of that column arent available based on the filtered data of the first column, then those options would be either greyed out from the second columns drop down or hidden completely. Confused yet?

The functionality I am looking for is very similar to how excel treats filtering multiple columns,

dotBlip

To clarify, I guess I am looking for a way to apply a sub filter to an already filtered list of data. The column select boxes will only display the available values from that column, not everything the unfiltered table contains.

allan

You would rebuilt the options list whenever the search event occurs. I'm afraid I don't have time at the moment to build an example, but that's the way I would approach it myself.

Allan

dotBlip

Thanks, allan. If someone could give me just a starting point with the code that would be great. I understand utilizing that firing of the search event, but I am still not entirely sure on how to proceed.

allan

How are you building the filters at the moment? Presumably using column().data()? If so, then simply use selector-modifier to select only the filtered data and then rebuild with that data.

Allan

dotBlip

Still struggling with getting this to work. I tried firing a reload of the select inputs on the search event and I ended up with double entries of everything. When someone gets a few minutes, could you show me how to accomplish this? I am just beginning with datatables and I can't really wrap my head around this.

Here is the base code I am starting with:

$(document).ready(function() {
    var table = $('#table1 ').DataTable();
 
    $("#table1 tfoot th").each( function ( i ) {
        var select = $('<select><option value="">[ Display All ]</option></select>')
            .appendTo( $(this).empty() )
            .on( 'change', function () {
                table.column( i )
                    .search( $(this).val() )
                    .draw();
            } );
 
        table.column( i ).data().unique().sort().each( function ( d, j ) {
            select.append( '<option value="'+d+'">'+d+'</option>' )
        } );
    } );
} );

dotBlip

Anyone?

adolfotcar

I just asked something similar.
I believe that the answer is here:
http://datatables.net/forums/discussion/8888/select-column-filtering

But I don't know how to put those codes to work.

dotBlip

Thanks for jumping into this, adolfotcar.

I checked your link and tried to piece together what I am trying to accomplish, but I got an "object doesn't support this property or method" in the console. Now that could be because I implemented it wrong based on your thread, not sure. Could you give me a quick run through on solving this?

allan

@dotBlip - Can you link to your page so we can take a look please.

Allan

dotBlip

Allan,

The page is actually on an Intranet so I can't do that. However, give me a few minutes and I will try and replicate my table and data on my private server.

dotBlip

Here is a quick test page I put together:

DataTables Example

There are only 5 entries in this table, but the functionality I need can still be demonstrated with this. Again, to remind, I am looking for the select boxes values to be updated with the current data displayed in the table every time the table is filtered.

dotBlip

Did this example help explain, allan?