How do I cascade information from one column to another with datatable?

Noodles12

I am using datatable for my project and filtering the columns on top. The filtering works well but the columns do not cascade. Is there a way to cascade the information from one column to another (depending upon the selection). For example, if I select Ashton Cox under Name, only Technical Author should be highlighted under Postion column and San Francisco under Office column. All other values in the dropdown should be grayed out.

Here is what I have tried so far.

Here is the link to my code - https://live.datatables.net/rajifejo/2/edit
Thanks.

kthorngren

This example has been posted in other threads with the same question.

Kevin

Noodles12

Thankyou, but the above example shows cascading columns in the footer or header. My requirement is to have custom drop-down filters on top (like in my example). How do I achieve this?

kthorngren

It doesn't matter where the inputs are the idea is the same. You have hard coded inputs where the example provided builds the select lists based on the values found in the columns. I would recommend doing the same. Where it has this:

  table.columns().every( function () {

You can add just the columns you want using the column-selector, for example:

  table.columns( [0,1,2] ).every( function () {

Also where it has this:

    var select = $('<select><option value=""></option></select>')
    .appendTo( $(column.footer()).empty() )

Change the selector $(column.footer()) to the selector of the inputs. You could use a counter within the columns().every() loop to increment the ID of the selector, something like this:

    counter++;
    var select = $('<select><option value=""></option></select>')
    .appendTo( $( '#dropdown' + counter ).empty() )

Kevin

kthorngren

I updated your test case with the changes I suggested:
https://live.datatables.net/rajifejo/4/edit

Kevin

Noodles12

Thankyou very much!