Wiring up events after a column is shown.

NateG

A scenario being asked for is to have a range filter within a header of a given column while the column visibility is available to show or hide any of the columns in the table. The issue I am running into is that if a column is hidden during the initialization, the event handler doesn't appear to be getting registered and thus the filtering isn't working. My general pseudo-code and reasoning is this:

1. Create two thead rows one for filtering and one for sorting
2. Add a single input for string filters, and two inputs for numeric filters (in order to do range filtering, this will expand once I get numbers working to include dates).
3. Initialize Datatable. Note that this must be done after adding the inputs in step 2 above because if I set a column to hidden by default through initialization, the input never gets created.
4. Add event handler to the filtering inputs. I can't do this in step 2 because I need access to an instance of the initializaed table in order to apply the filter such as **table**.column(1).search(inputValue).draw();

I have set up an example of what I'm trying to do here. In the example, I have hidden salary by default. When it is shown it has the range filter inputs, but the event handler does not work. If you switch the visible flag in the column definition to true, the range filtering on salary works fine, but hiding columns by default is a business requirement we must provide.

My question is, is there a different approach to this problem? I wasn't able to find an oncolumnshown event or something similar in order to wireup the event in the way that I need and no matter the order I perform the steps above, I always come across some issue that prevents me from accomplishing this.

kthorngren

Thanks for the detailed example!

I think the problem is the you need to use delegated events to include the hidden columns. The search plugin is causing an exception in your example. Instead of troubleshooting it I removed it.

Here is an updated example using a different selector for the event handler:
http://live.datatables.net/qinomege/1/edit

I removed the loop and leveraged your filter class to for the selector. I also hid the Age column so you can see both working. I used a console.log output to show the number range inputs work.

Kevin

NateG

Had some bad assumptions there on the filterObj in my original example. Here it is working with salary and range filters. There was also a copy/paste error in your example, where the datatable ID was set to #banksTable instead of #example which may have contributed to the issue you experienced with the custom search plugin not working.