ColVis - DataTable Retains Large Size When Columns Are Hidden

TacoRob

I'm working with a 40 column DataTable, and am impressed with how the ColVis plug-in works so fluidly. Here's where I'm confused logically (at least, for this particular example).

Let's say the datatable starts out with the 40 columns of tabular data it's provided. If the user hides a substantial amount of columns (for example, let's hide 35 or so), the remaining columns all resize to fill out the same real estate on the screen. This is puzzling; because the datatable is correctly showing 5 columns worth of data - but covers the same size as the 40 column initial load.

Is there a way I can fix this so that if I've picked, say, 5 columns to display that the table only takes the width it requires (approximately the full screen)? Where would I look to correct that?

allan

This is actually intentional so that a table like this one ( http://datatables.net/release-datatables/extras/ColVis/ ) will continue to look well formatted when columns are hidden - rather than having tables reduce in size. Having tables reduce in size isn't really something DataTables does at the moment, it will always try to stay fixed at the same width. Having said that, if you enable xScrolling (without sScrollXInner given) then the table will reduce in size as needed, within the view port.

Allan

TacoRob

Hmm that seemed to work for a little, but the high number of columns still has some funky display issues.

For grins, here is a sample of the JSON data that I am playing with:
[code]
{"sEcho":0,"iTotalRecords":"3","iTotalDisplayRecords":"3","aaData":[["Acrylic","Plexiglas (Altuglas),\nLucite (DuPont)","Amorphous","1.130","1.200","1.165","0.04209145","138000","550000","344000","5320","11700","8510","170000","520000","345000","4800","20700","12750"," 1"," 85","43","31","105","68","","","311","0.0000000000","0.0000000000","0.0000038800","0","0","985","good","good","HB","transparent","",""],["Cellulose Acetate (CA)","Tenite","","1.260","1.310","1.285","0.04642705","232000","319000","275500","2760","7400","5080","110000","399000","254500","3920","10400","7160","2.2","16","9.1","38","112","75"," 280"," 347","313.5","0.0000000000","0.0000000000","0.0000502550","0","0","387.5","good","poor","","transparent","",""],["Cellulose Acetate Butyrate (CAB)","Tenite (Eastman Chemical)","Crystalline","1.160","1.310","1.235","0.04462055","146000","231000","188500","2300","7470","4885","120000","260000","190000","0","0","0"," 30"," 51","40.5","40","83","62","","","","0.0000000000","0.0000000000","0.0000000000","0","0","387.5","good","poor","HB","transparent","","good"]]}
[/code]

I tried the suggestion of removing [code]_fnMap( oSettings.oScroll, oInit, "sScrollXInner", "sXInner" );[/code] from jquery.dataTables.js but it seems something is still a bit off.

Hmmm...Looks like a fun data set to play with? =)

kunalb

I am having the same problem. Are there any other suggestions for solving this problem?

taelor

I have this same request.

Is there anyway we can hook into the action for when something gets hidden or show with a call back or something?

If so, we could calculate table width, number of columns, and average width per column and just grow/shrink based on that. Or even better, get a Column object to work with that could give us the exact width of the column we just showed or hid.

This is some of my old code we used to use before ColVis was implemented.

[code]

function initialize_hidden_column_links(table_handle){
table_id = table_handle.attr("id");

jQuery('#hidden_columns').empty();

number_columns = table_handle.fnSettings().aoColumns.length;
total_width = parseInt(jQuery("#"+table_id+"_wrapper").css("width"));
column_increment = (total_width / number_columns);

jQuery.each(table_handle.fnSettings().aoColumns, function(i, column){
if(!column.bVisible){
jQuery('#hidden_columns').append("Show "+column.sTitle+"")
width = parseInt(jQuery("#"+table_id+"_wrapper").css("width"));
jQuery("#"+table_id+"_wrapper").css("width", (width-column_increment)+"px");
jQuery("#"+table_id).css("width", (width-column_increment)+"px");
}
else{
jQuery('#hidden_columns').append("Hide "+column.sTitle+"")
}
});

jQuery('.hide_column_link').live('click', function(){
column = parseInt(jQuery(this).attr('href').split("#")[1]);
header = jQuery(this).text().replace(/Hide /, "");
table_handle.fnSetColumnVis( column, false );
jQuery(this).text("Show "+header).removeClass('hide_column_link').addClass('show_column_link');
jQuery(this).parent().attr("style", "text-align:left");
width = parseInt(jQuery("#"+table_id+"_wrapper").css("width"));
jQuery("#"+table_id+"_wrapper").css("width", (width-column_increment)+"px");
jQuery("#"+table_id).css("width", (width-column_increment)+"px");
});

jQuery('.show_column_link').live('click', function(){
column = parseInt(jQuery(this).attr('href').split("#")[1]);
header = jQuery(this).text().replace(/Show /, "");
table_handle.fnSetColumnVis( column, true );
jQuery(this).text("Hide "+header).removeClass('show_column_link').addClass('hide_column_link');
jQuery(this).parent().attr("style", "text-align:right");
width = parseInt(jQuery("#"+table_id+"_wrapper").css("width"));
jQuery("#"+table_id+"_wrapper").css("width", (width+column_increment)+"px");
jQuery("#"+table_id).css("width", (width+column_increment)+"px");
});
}

[/code]

bts

Any progress on fixing this bug?
Using sScrollX looks like pretty ugly workaround.
The proper way would be to set some option like sAutoResize: true during initialization to let user control this behavior.

allan

You just need to not have the table width set in CSS (which I have by default). Here is a trivial example showing the table get smaller as you use ColVis: http://live.datatables.net/azohes/edit

Allan