Showing/Hiding Columns with Ajax

smoore217

Hi, I'm having an issue where I want my ajax loaded table to have options for showing and hiding columns. The issue is when I use the fnSetColumnVis function, it redraws the table and the data all gets moved over so that data is under the wrong heading. For example if I have two columns next to each other and hide the left one, then when it redraws the data that was under the hidden column is now under the second column (the only one visible) and the data that was under the second column is gone. I know that you can have the function not redraw, but the issue is we have filtering options as well, so even if the function doesn't redraw, the filters will redraw it and cause the same problem. Does anyone have a solution to this problem?

Thanks!

Pavilion

I too am having a problem with this. My users can use checkboxes to show/hide some of the columns. When a column is shown or hidden, the column headings do not resize with the remaining columns, until I click a heading. Once I click a heading, then the column headers are redrawn to fit the actual data columns. Following is my script:

[code]
// Manage show/hide column toggles
$('#toggle_EndDate').change(function(){
var EndDate_Toggle = $(this).is(':checked');
(EndDate_Toggle == true ? $('.toggleEndTime').show() : $('.toggleEndTime').hide());

// the following line is an attempt to get the log header to resize to the full-width of the table AFTER the EndDate column is hidden or shown. But the line does not work.
$('#logHeader').css('width', '100%');
});
[/code]

Any advice is appreciated.

Pavilion

Pavilion

smoore217

It seems .fnDraw() works about the best. Following is my syntax:

[code]
$('#toggle_Type').change(function(){
var Type_Toggle = $(this).is(':checked');
(Type_Toggle == true ? $('.toggleType').show() : $('.toggleType').hide());
Log_Tbl.fnDraw();
});
[/code]

Log_Tbl.fnAdjustColumnSizing(); works as well. But for my application .fnDraw() was "cleaner and crisper".

Thought this information might help you.

Pavilion

allan

Can you link to a test case showing the problem please: http://datatables.net/forums/discussion/12899/post-test-cases-when-asking-for-help-please-read .

I've also say that using CSS to show / hide columns can result is column misalignment between browsers, which is why DataTables uses DOM manipulation in is column visibility options.

Allan