Column width, header and footers, and JSON data

nlownes

Hey all,

I'm looking for some assistance here. The background of the situation is this:

I'm trying to implement server side per-column searching. I've already got server side pagination, sorting etc. done and it's working wonderfully.

The problem I'm running into is that I'm losing the column widths that I'm setting during initialization after the JSON data is returned and loaded into the table, but I'm only losing the column widths if I have input elements in the footer (or header) elements. Without these input elements, the column widths are retained perfectly. The code example below shows them in the footer.

datatables init:
[code]
jQuery(document).ready(function () {
jQuery('#goals_table').dataTable({
"oLanguage": {
"sSearch": "Search",

"sProcessing": 'Processing'
},
"sPaginationType": "full_numbers",
"iDisplayLength": 50,
"bProcessing": true,
"bServerSide": true,
"bLengthChange": false,
"bStateSave": true,
"bFilter": true,
"bAutoWidth": false,
'bScrollInfinite': 'true',
'bScrollCollapse': true,
'sScrollY': '400px',


'sAjaxSource': '/systems/leaders/goals_graph_info/list_rows',
'bJQueryUI': true,
"aoColumns": [
{
'sType': 'string',
'bSortable':false,
'bSearchable':true,




'sWidth':'40px'
},{
'sType': 'html',
'bSortable':true,
'bSearchable':true,




'sWidth':'100px'
},{
'sType': 'string',
'bSortable':true,
'bSearchable':true,




'sWidth':'100px'
},{
'sType': 'string',
'bSortable':true,
'bSearchable':true,




'sWidth':'120px'
},{
'sType': 'string',
'bSortable':true,
'bSearchable':true,




'sWidth':'380px'
},{
'sType': 'string',
'bSortable':true,
'bSearchable':true,




'sWidth':'60px'
},{
'sType': 'string',
'bSortable':true,
'bSearchable':true,




'sWidth':'60px'
}
],

"fnServerData": function ( sSource, aoData, fnCallback ) {
aoData.push( );
jQuery.getJSON( sSource, aoData, function (json) {
fnCallback(json);
} );
}
});
});
[/code]

html:

[code]




Name
Group
Category
Goal Text
Visibility
Status




















[/code]

I've seen in the discussions elsewhere mention that the columns are resized based on the longest string length or something to that effect. It may just be that I need to disable that, but I can't seem to find how to do that anywhere.

allan

I first guess is that you might have a CSS declaration something like input{ width: 100px }, which would cause the table all sorts of problems :-). Do you have anything like that in there? Are the input elements styled at all?

> It may just be that I need to disable that, but I can't seem to find how to do that anywhere.

You'd need to edit the source in order to do that as this can't be configured with a parameter. It might be interesting to try if there are no other options thought...

Allan

nlownes

Hey Allan,

Thank you for your reply.

No, nothing CSS declarations like that. Input elements aren't styled.

Would you mind pointing me to where in the source that occurs? Maybe I can just turn that into a configurable option.

allan

The function in question is _fnGetWidestNode() - around line 5500. It would be interesting to comment out the lines:

nCalcTmp.style.visibility = "hidden";
and
nCalcTmp.parentNode.removeChild( nCalcTmp );

in _fnCalculateColumnWidths to see the table which DataTables creates in order to calculate the sizes for hte columns.

Allan

nlownes

Hm. So digging into this some more, I see that none of the resizing functions are called: I've set column sizes manually and bAutoWidth is set to false.

It works correctly with only one header and no inputs in the footer. I'm kinda stuck as to what could be changing the column widths if none of the resizing functions are called, and only if there is content in the footer or additional content in a separate tr within thead.

Allan, thanks for writing code that is easy to follow. I'll keep digging, but any pointers on what's happening there would be more than helpful.

Also, would you consider this to be a bug? Seems a little counterintuitive that column sizes would change from anything that is explicitly set. If this can be fixed, I'd love to contribute the fix.

allan

The trick here is that you've got scrolling enabled. The way DataTables works is to have two tables - one for the header, one for the body (when scrolling - it's all one when not) with is in a scrollable div. It will match the column widths between the two on every draw - this is way it must set an absolute width on the columns, otherwise they will be out of alignment and look rubbish.

So that's why it's doing what it is doing - as to why it is not doing quite what you expect - can you link us to your example please? The column widths are particularly difficult to get exactly right and they can get thrown off by elements which are over keen to grab more space. Having said that I've recently been working on an example with scrolling and input elements in the header and it seems to be working okay.

Allan