Individual Columns Filtering - Update DropDown List on other columns to not show invalid choices

aaflaki

Hello

Our implementation of DataTables works exactly like the example in (http://datatables.net/release-datatables/examples/api/multi_filter_select.html).

I need help to revise it so that once a user filters one column (say Position to "Post-Sales Support" in the example link above), other filters get an updated list of choices; listing only valid values remaining in the Table based on the already applied filter. In the above example "OFFICE" column only has got one value of "EDIN..." but the filter on OFFICE column still lists all the values, which will result in an EMPTY table once applied.

I know it should result empty because apparently there are no Data for that selection, But I really prefer to update the FILTERS not to even present those choices to the user, once any of the COLUMNS are already filtered.

In above example desired outcome will be; once Position is filtered to show only the "Post-Sales Support", other columns, say OFFICE only presents the choice of available value(s) to the user, in this case only the "EDINBURG".

Is it something possible? Can please anybody advise how we can have this behavior implemented?

Out DataTable is version 1.10.1

daniel_r

You can achive it with my yadcf plugin, by setting cumulative_filtering: true , see it in action in the showacase

Watch code snippet at the bottom

ThomD

You can use the code from the example, and reinvoke it by hooking into the on .draw() method so that every time the page is drawn, the filters get refreshed.

aaflaki

Hello ThomD

thanks for the comment, can you advise more specifically what should I do. Below code is the call to .draw from my TPL file.
Can I make the change here and get the column filters updated with previously filtered information? How?

        <script type="text/javascript" language="javascript" class="init">
            $(document).ready(function() {
                var table = $('#example').DataTable(
                    
                    );

                $("#example thead th").each( function ( i ) {
                    var select = $('<select><option value="">All</option></select>')
                    .appendTo( $(this).empty() )
                    .on( 'change', function () {
                        var val = $(this).val();

                        table.column( i )
                        .search( val ? '^'+$(this).val()+'$' : val, true, false )
                        .draw();
                    } );

                    table.column( i ).data().unique().sort().each( function ( d, j ) {
                        select.append( '<option value="'+d+'">'+d+'</option>' )
                    } );
                } );
            } );
        </script>

ThomD

Now that I'm at work, here is my code. I load my full data set and do not page the data, so if you load partial sets or page data, you may need to make some adjustments. I'd look at Daniel_r's plug in if this doesn't work for you.

dtTable.on('draw', function () {
    dtTable.columns('.dt-filter').every( function ( ) {
        var thisColumn = this;
        var columnIndex = $(thisColumn.header()).index();  //this is the visible cell index
        var selectElement = $(thisColumn.header()).find('select');
        if ( selectElement.val() == null || selectElement.val() == ''   ) {
                 selectElement.empty();
            selectElement.append('<option value=""></option>');
            dtTable.column(columnIndex, { search: 'applied'}).data().unique().sort().each( function ( d, j ) {
                    selectElement.append( '<option value="'+d+'">'+d+'</option>' );
            } );
        }
    } );
} );

Enjoy!

aaflaki

I have tried the code above, but does not seem to work on our table. It might be due to not properly using it also. I am not sure.

It would be highly appreciated if somebody can help me find out what should I do to be able to resolve the problem.

My table works like all the examples I have seen in this website, and strangely all the tables here share the same problem; That is once you filter one column, other columns still are giving the user choices which will result an empty table.

I am sure this can be fixed and I have read about the event looks like some modifications has to be done once the search.dt event is fired. But I cannot figure out what to do.

Any help is appreciated, and kindly explain where and how to use your suggestions.