Header layout when using extra level filtering to only show available options

silkspin

I've been having trouble trying to get the filters to redraw and only show the available options depending on the previous selection. My header worked fine until I decided to add the extra level filtering. After some trial and error I've finally located the problem, but I don't know how to fix it.

My header uses 2 rows. In the top row <thead><tr><th> is the column name and sorting functionality. The bottom row <thead><tr><td> contains the filter. I did this so all filters are aligned to the bottom and use the full width of the column. I've now realised that the reason the extra level filtering won't work is because I set orderCellsTop: true, to move the sorting into the top row. Is it possible to have the layout I want and for it to work?

I've created an example where the sorting is in the top row but the filters still show all options... http://live.datatables.net/yacevoru/2/edit

kthorngren

Take a look at Allan's cascade filters in this thread.

Kevin

silkspin

Hi Kevin. That example appears to remove the other options once the first filter is selected. That actually might come in useful but it doesn't fix my current header layout problem. Those examples were in the footer. My 2 row header looks like this...

I have orderCellsTop: true, which puts the sorting in the top row (where I want it to be) but the bottom row with the filter then won't remove unavailable items. Or are you saying I need to add filters to the bottom for this to work? I really would like it to be like my current layout and like this example http://live.datatables.net/yacevoru/2/edit but with the secondary filtering working too.

kthorngren

You have a few things wrong on your draw event. I took Allan's code example and merged it into your draw event.
http://live.datatables.net/yacevoru/4/edit

The biggest issue is the select you were using for the 2nd header cells was incorrect. I changed the loop to columns().every() like you have in initComplete and used the same selector you have in initComplete. The rest is from Allan's example.

Kevin

silkspin

That's fantastic Kevin! You've made it much more streamlined now and it works perfectly. In fact it functions even better than I was originally aiming for. Thanks again.