Filter box in specified container disappears when hiding another column

[1nickt]

Hello,

Unfortunately the fix to colVis + stateSave leads to broken filters #265 hasn't addressed a related issue.

When you use fixedColumns extension, DataTables makes a clone of the first column and displays it over the top of the original table.

You can use yadcf's 'filter_container_id' option to get around this, so long as you intervene and assign an ID to the cloned table's <th>. This works nicely.

But if you then use colVis to hide other columns, the Filter Box for the fixed column disappears, and does not come back when you unhide the other column.

Refreshing the page makes the Filter Box appear again.

Please see this example

Thank you!

[1nickt]

Happy New Year!

Was wondering if there's any chance you could look at this, or if there's anything else I can do to help?

Thankyou!

[vedmack]

Hi,
Thanks,
Fixed headers have no events to listen to so its hard to integrate with it, but a while ago I thought about a way to handle it afterall - to add filter_container_selector to yadcf and to point it to the cloned column container, anyway I just comitted several fixes and it seems to work now (its not 100% but it might be in the right direction), see working jsbin

[1nickt]

Hi Daniel,

Unfortunately the jsbin referenced above doesn't work ... the fixed col's filter box still disappears and still won't return when I hide/show a different column ...

Let me know if I can help test or anything.

Thanks,
-nick

[vedmack]

Should work now, grab the lateset version 0.8.9.beta.37.

See jsbin

[1nickt]

Hi Daniel,

Thanks so much for your work on this.

Unfortunately it's still not working. The jsbin works OK, but since I am building the table from javascript, I can't assign the class to the appropriate table header until after DataTables has cerated the table and then cloned it for the Fixed Column.

This is how I can get a YADFC filter box in the first column, which is fixed, when the table data source is javascript (unfortunately DataTables just assigns the class, not an id, to the cloned table, so first we have to find it and give it an id so we can add the span to it that YADFC will use):

                 // Assign an ID to the cloned table used for the fixedColumn
                  var clonedTable = document.querySelectorAll('.DTFC_Cloned');
                  for (var i = 0; i < clonedTable.length; i++)
                      clonedTable[i].id = 'DTFC_Cloned';

                  $('#DTFC_Cloned thead th:last-child').append(
                      '<span id="my_filter_container" class="my-filter-container"></span>'
                  );

                  yadcf.init(myTable, [
                      {
                          column_number:             0,
                          filter_type:               'text',
                          filter_container_id:       'my_filter_container',
                          filter_reset_button_text:  false,
                          filter_delay:              150,
                      },

Now I added a line as in your latest jsbin :

                  yadcf.init(myTable, [
                      {
                          column_number:             0,
                          filter_type:               'text',
                          filter_container_id:       'my_filter_container',
                          filter_container_selector: '.DTFC_LeftHeadWrapper .my-filter-container',
                          filter_reset_button_text:  false,
                          filter_delay:              150,
                      },

Unfortunately same result; the filter box in the fixed column disappears when you hide another column.

Thanks

• nick