Colvis in table with two thead nodes

jLinux

Basically, im trying to use the ColVis button/extension on a table that has two thead, (One is used as the column headers, the other is used for filters)

When I try to hide a column, it doesn't hide the cell within the 2nd thead.

Heres a JSBin example

Is there a way to fix this?

Im using YADCF plugin (by @daniel_r), which I thought was decently common, and ive seem some people do it this way, so I was hoping someone may have ran into this.

The only "fix" I can think of, is to use the column-visibility to manually hide/show the associated cell in the 2nd thead.. But I would think theres a better way

Thanks!

jLinux

This is what I was trying to avoid, but if its not possible, then thats fine I suppose..

daniel_r

Hi,

You can use only one <thead> tag per table - (read inside for details), so instead of two <thead> with one <tr> in each, you should use one <thead> with two <tr>

Here a working jsfiddle for you

and one with the filters

jLinux

I know i tried that before.. and there was a big issue with it, i cant seem to remember what it was though. Now its going to drive me nuts, lol.

I did try it though, hmmm... Let me try to remember what the issue was.

jLinux

@daniel_r the last one you linked to ("and one with filters"), it uses two theads..

But I combined it into one, and it works.

Super weird though, i know I tried this, I think it was something else that it was causing an issue with. Ill try though. Thanks @daniel_r !

jLinux

@daniel_r

Why dont you have YADCF setup as something that can be initiated via the DT settings? something like..

$('#example').DataTable({
    yadcf: [
        { column_number: 0 },
        { column_number: 1 },
        { column_number: 2 }
    ]
});

Just curious..

daniel_r

Fixed the link with the working sample (it was a quick clone of yours - so I forgot about the thead)

Why its not part of the DT settings? Because at the time it was faster to implemet and I wanted it to be used as most of the jquery plugins and not internaly inside DT

jLinux

wanted it to be used as most of the jquery plugins and not internaly inside DT

Not sure what you mean. You mean just used like a standard jQuery plugin? Can this be used for other things other than DT? If not, then isnt it more of a .. jQuery DataTables Plugin? lol.

Again, just asking :-) Love the plugin tho. Did you see I made a few plugins? Nothing too superb, just some stuff I used more than a couple times, so decided it would be useful to turn them into plugins..

daniel_r

I wanted yadcf to be initiated like other jquery plugins $('.someSelector').pluginName();

Nice work on the plugins

jLinux

@daniel_r, odd, but when I switch it from 2x thead, to a single thead with two tr, and I ran into a few issues...

• Using columns.title would put the title in the 2nd tr row as well as the first, and since thats where the filters are, it really threw it off
• I kept get error prompts from YADCF saying that the filter containers weren't found, Im guessing this is because the column was hidden via colVis, but it works fine if YADCF is in its own thead

And yes, I did switch all the CSS selectors from thead#header-filters > tr > th to just tr#header-filters > th

Eventually, it just seemed easier to use two theads, is that the "incorrect" way to go? or "Bad Practice"?

daniel_r

Using two thead is not valid way, you can't tell when I will go wrong on you.

I would suggest to try one of the follwoing options:

1) Use one thead with one th and style it so the title will appear on one row and the filter will be placed below it ( display block? )

OR

2) Use one thead with one th and place each filter in seperate div with an id (inside that th and use the yadcf filter_container_id for each filter, that way yadcf should be fine no matter where you place the filter.