Fixed width columns seem to fail after hiding a column after a table is drawn.

tristram

When I define a table where a column has a fixed width defined during its creation, and then I later make set another column to hidden, the column previous set to a fixed width no longer is of fixed width. The following is an example of setting the column.

    columnDefs: [
        { targets: 0, width: '130px' },    // Fix the column width
        { targets: 1, "visible": true },
        { targets: 2, "visible": true } ]

Because my actual code is quite complicated, I worked to narrow the issue down, and discovered that simply deleting the table and recreating it causes the same issue to occur. I've attached a link to live code to demonstrate the problem. The test case requires that the browser window to be quite wide.

Does anyone have any idea why this is happening... and a work around? Thanks!

http://live.datatables.net/guxayowe/1/edit

allan

Thank you for the excellent test case. I believe the problem is caused by DataTables not removing the column widths that it is applying to the header cells on destroy. So when it is initialised the column cells have widths applied to them, but the adjustment calculations mean they aren't used identically...

As a workaround, after you destroy the table remove the column widths on the header cells. Here is an updated example: http://live.datatables.net/guxayowe/4/edit .

Regards,
Allan

tristram

Yes! The work-around does fix the problem I was having. I tried dozens of approaches (including a stupid amount of jQuery injections), but I never considered deleting the widths from the headers BEFORE re-creating the table.

I will now work back to my original approach (hiding and showing columns, instead of deleting and re-creating the table) to confirm the work-around solves the original problem(s). I'll post a comment here when I confirm it.

Thank you for getting back to me so quickly! DataTables is a really great product.

tristram

Yup, it solves the problem. Again, thank you.

tristram

I realize I should be a bit clearer about the problem it solved (other than obviously the test case I posted). The test case I posted on the surface is a very different problem... but I believed they were related.

The problem that led me to my first post above occurred when I switched from an X column layout to an (X + Y) column layout. It did not occur when I went from an X column layout to an (X - Y) column layout. The issue was that the fixed column width would not be respected until I resized the window. ("X" and "Y" indicate a column count)

When I add @Allan's fix after hiding the column(s), but before a call to table.draw( ), the column width is draw at the correct width. His fix:

         $('#example thead th').each(function() {
             $(this).css('width', '');
         });

The sample case I originally posted was the product of me failing to come up with a test case to duplicate the actual problem I was having. Fortunately, they were indeed related.