table footer with colspan=2 is hidden because next column is hidden (but not column with colspan)

guillochon

Hi, I have a table where one of the column footers has a colspan set to 2, with the next column being hidden by default. This is causing the footer of the column with the colspan to also be hidden by default. When I make the next column visible, the footer in the column with the colspan also becomes visible; if I toggle it back to invisible I see the same missing column footer as when I first load the table.

Any way out of this pickle aside from not using colspans in footers?

kthorngren

I might be misunderstanding the problem but what you describe seems to work in this example:
http://live.datatables.net/payubura/1/edit

Maybe you can update the example to show the problem or provide the steps need to recreate the problem.

Kevin

kthorngren

This example starts with the columns next to the colspan column as hidden.
http://live.datatables.net/kupoyanu/1/edit

Still seems to work correctly.

Kevin

guillochon

If I do colspan=2 I'm getting a column number mismatch; "Cannot set property 'nTf' of undefined", I have to explicitly remove a footer as I loop through the footers. I don't seem to be able to just do colspan=2 as you have done.

guillochon

Note that I also have responsive enabled, I'm not sure if that interferes with this.

kthorngren

I added responsive and it still seems to work.
http://live.datatables.net/xuqaboya/1/edit

If I do colspan=2 I'm getting a column number mismatch; "Cannot set property 'nTf' of undefined", I have to explicitly remove a footer as I loop through the footers. I don't seem to be able to just do colspan=2 as you have done.

Not sure what you are doing when looping through the footers. Need to see your code to help. Can you update my test case or provide your own showing the issue or a link to your page?

Do you also have colspan=2 in the tbody? If so this is not supported.

Kevin

guillochon

Here's the code that removes the footer and sets the colspan:

        jQuery('#example tfoot th').each( function ( index ) {
            var title = jQuery(this).text();
            var classname = jQuery(this).attr('class').split(' ')[0];
            if (classname == 'alias') {
                jQuery(this).remove();
            }
            if (classname == 'name') {
                jQuery(this).attr('colspan', 2);
            }
        }

I don't really want to change the live page as it will break the table for everyone.

guillochon

Note that I've also tried setting the colspan in the HTML itself (not using jQuery) and I get the same error too.

kthorngren

I don't really want to change the live page as it will break the table for everyone.

That is the purpose of that site is to build test cases with issues so they can be debugged. Its easy to create a new page by going to http://live.datatables.net/.

I think I recreated your problem here:
http://live.datatables.net/xuqaboya/2/edit

In my test case the table has 6 columns and starts with 6 footers. The code above sets one of the columns with colspan=2. Since a footer column is not removed to compensate there are now 7 footer columns. If I remove one of the footers from the HTML then the code above works as it ends up with 6 footer columns.

The number of footer columns, including colspan, needs to equal the number of table columns.

Kevin