Resizing columns after making hidden columns visible

bryceray1121

I've read through quite a few threads in attempt to get this working, however I've been unable to find a solution to my particular problem.

I have about 14 tables on a page and I wanted some columns to be hidden by default. TO accomplish this I used aoColumnDefs like this:
[code]
//Logic to load all tables into html page
//then adjust all the tables at once using renderDataTables below.
var oTable = renderDataTables(id)
function renderDataTable(id){
var oTable = jQuery(id).dataTable( {
"sScrollY": "200px",
"bScrollCollapse":true,
"sDom": 'rt<"bottom"flp>',
"bPaginate": false,
"bStateSave": false,
"aoColumnDefs": [
{"bSearchable": false, "bSortable": false, "aTargets": "dataTable-exclude"},
{"bVisible":false,"aTargets":"dataTables_notVisible"}
]
} );
return oTable;
}
[/code]

I then have a button in my table that when clicked calls this function:
[code]
function fnShowHide( iCols)
{
for(var i=0;i

allan

aTargets is an array - so the first thing to do is to add brackets: "aTargets": [ "dataTables_notVisible" ]

Does that do the trick?

Allan

bryceray1121

I added the brackets and it did not help or hurt. I do not have any problems making the columns visible / invisible. The problem lies in resizing the width of the columns after making the initially invisible columns visible. When I do this the columns in the rows do not even come close to lining up.

bryceray1121

I've actually discovered the source of the problem. I didn't see an error message being outputted to the console.
"DataTables warning (table id = 'problems-table'): The table cannot fit into the current element which will cause column misalignment. It is suggested that you enable x-scrolling or increase the width the table has in which to be drawn"

I'm assuming their is no way around this problem short of reducing the number of columns or increasing the width of the table. However, while I was testing I noticed that if a page loads and the browser is not maximized (lets just say at 1/2 width) and then I maximize the headers do not expand to the full width of the newly expanded table and the background shows through.

The error messages also suggest I enable x-scrolling. However, when I do this only the scrollbody scrolls. The headers remain in place which makes it difficult to understand what data you are actually looking at.

allan

Do the headers not scroll like in this example: http://datatables.net/examples/basic_init/scroll_x.html ? They just stay static? Sounds odd! Also, are you using DataTables 1.7.3?

Allan

bryceray1121

Yes, I am using DataTables 1.7.3. Here is my current code that defines both an x and y scroll.
[code]
function renderDataTable(id){
var oTable2 = jQuery(id).dataTable( {
"sScrollY": "200px",
"sScrollX": "100%", /* Required for viewing tables with lots of columns at low resolution - otherwise columns are mis-aligned */
"bScrollCollapse":true,
"sDom": 'rt<"bottom"flp>',
"bPaginate": false,
"bStateSave": false,
"aoColumnDefs": [
{"bSearchable": false, "bSortable": false, "aTargets": "dataTable-exclude"},
{"bVisible":false,"aTargets":["dataTables_notVisible"]}
]
} );
[/code]

allan

Are you able to give us a link, or a screenshot showing the problem please? Might make it earlier to understand. Also you are missing the array syntax on the first aTargets parameters.

Allan

bryceray1121

I fixed the target syntax. Unfortunately, I am unable to upload the page. Below are two screen-shots. The first screen-shot is when I have my browser at 3/4 width (during initialization). Then re-size it to full width without refreshing the page. As you can see the table elements directly below scrollBody and scrollHeader remain fixed in their width.
http://www.flickr.com/photos/26503296@N04/5096839782/
http://www.flickr.com/photos/26503296@N04/5096839790/

This is the html (with some mixed in javascript). The datatables are applied to the table within the form. The top table is just the header.
[code] ''+
''+
''+
''+
''+
''+
''+this.longTitle+''+
''+
''+
''+
''+
'Details'+
' Print'+
''+
''+
''+
''+
''+
''+
''+
''+
''+
''+
this.getDetailsHeader()+
''+
''+
''+
sections["details"]+
''+
''+
''+

'';[/code]

I appreciate your help.