Column width not refreshed after Ajax load.

Guigoz

Hi,

I've a little problem.
I use Datatables with a server-side script.
I use the autowidth system.

When the data is loaded with Ajax, the column width looks strange as you can see on the following screenshot :
http://img863.imageshack.us/img863/5745/dtwithoutadjust.png

The login and date columns are too wide compared to their contents, and the action and message are too small.

There is no call to the _fnAjustColumnSizing function after the Ajax load.

So i've added this line
[code]_fnAjustColumnSizing(oSettings);[/code]
before the following block in _fnAjaxUpdateDraw
[code]oSettings.bAjaxDataGet = false;
_fnDraw( oSettings );
oSettings.bAjaxDataGet = true;
_fnProcessingDisplay( oSettings, false );[/code]

Now i've the following result :
http://img40.imageshack.us/img40/6186/dtwithadjust.png

It's much more better.
So, is this a bug or not?

Thanks for your help,
Guillaume.

allan

Presumably on the first draw the table columns were a bit better sized, and then with the second draw the data changed so the column widths didn't look quite right - is that correct? In which case, I believe it not to be a bug since I was typically expecting data to be similar on each draw (obviously not identical) and I didn't want the column sizes bouncing around as I thought it was distracting.

There is the fnAdjustColumnSizing API method available if you want to have DataTables recalculate the column sizes.

Allan

Guigoz

Hi Allan and thanks for your fast response,

The first draw has exactly the same problem as the first screenshot.
Here is a screenshot of the first draw :
http://img64.imageshack.us/img64/3017/dtfirstdraw.png

All fields have the same size except the 'action' field which is very small.

I've added an alert(); command in the _fnAjustColumnSizing() function and I can see that this function is never called.
No call before the data load and no call after.

When the page loads, I've the 'processing...' message and the are already sized, when all data are drawn, the columns are not resized, it keeps the same initial width.

So I don't know how the columns widths are assigned to my but I think it does not depend on the loaded data.

Guillaume.

Guigoz

Hi,

Any hint how columns are automatically sized with Ajax Load?

Thanks,
Guillaume.

NigelRMurray

Hello all. Although I'm struggling a little to understand some of the nuances, I'm very impressed with DataTable Alan. Well done and thanks for this contribution.

In particular, I was recently struggling with the automatic resizing of columns after an Ajax load. I have gone through the various postings and tried many things on my own but, in the end (as so often happens), the answer appears to be simple. I just added a call to fnAdjustColumnSizing(true) in the fnInitComplete callback. Something like this:

$('#table').dataTable( {
"bProcessing": false,
"bServerSide": false,
"sAjaxSource": "abc.php",
"fnServerData": dt_fnServerData(
{ "param": "param"}),
"fnInitComplete": function() {
this.fnAdjustColumnSizing(true);
})

Seems to work.

allan

Yup - that's exactly what I do when I want the table to resize based on the content as well. I'll consider adding that in by default for the first load of an Ajax source. The only disadvantage is that it requires an extra draw, which can be a performance hit if using FixedColumns or something like that.

Regards,
Allan

NigelRMurray

NIce to hear I did it right. But now I have a different, if related, problem. Wanting to hide one of the columns, I set the bVisible property to false:

"aoColumnDefs": [
{ "bVisible": false,
"aTargets": [ 4 ]
}
]

But this broke the resizing of the columns that worked so well until this point. The resizing does work fine for subsequent Ajax loads but, on the first load, the columns do not resize nor does the table expand horizontally to take up the available space. Until hiding the column, I never saw this behaviour.

What am I missing?

allan

Not sure - I would have expected that to work! Can you give me a link to your example please?

Thanks,
Allan

NigelRMurray

Here's my first kick at giving you what you need to comment. Please note that although the datatable is inside a jQuery Tab, everything worked fine until I set bVisible: false on the last column.

I have provided the following:
1. Three different views of the datatable at http://96.8.118.116/Datatables.jpg (see sequence of operations below),
2. A simplified version of the tab code below.

Here is the sequence of events for demonstrating the issue, each of which has an image on the view jpg:
1. With all the columns visible, open the tab. The datatable takes up the entire width of the window, as I have come to expect.
2. With the last column invisible, open the tab. This time the datatable does not take up the entire width of the window
3. Continuing from #2 above, request a tab load using $('#tabs').tabs('load', 8). Now the datatable once again takes up the entire width of the window.

Weird isn't it that this issue can be caused by simply setting bVisible: false on the last column?

[code]
$(function() {

// Init user data
$('#test_backupTable').dataTable( {
"bProcessing": false,
"bServerSide": false,
"sAjaxSource": "sysCmd.php",
"fnServerData": dt_fnServerData(
{ "fcn": "getBUDirInfo", "param0": "/",
"param1": "true"}
),
"fnInitComplete": function() {
this.fnAdjustColumnSizing(true);
},
"bSort": true,
"bFilter": true,
"bPaginate": true,
"bInfo": true,
"bAutoWidth:": true,
"oLanguage": {
"sEmptyTable": "No data to display"
},
"aoColumnDefs": [
{ "bVisible": true, // Set to false for #2 of the sequence
"aTargets": [ 4 ]
}
]

} );
});

[/code]

Guigoz

I use datatables in jQuery Tabs too!
Maybe there is a little incompatibility between datatables and Tabs.

allan

My guess is that if you change your bVisible:true to sWidth: "80px" (so the column is visible, but a width is assigned) it will "fail" in the same way as well. Can you confirm if this is the case.

The reason I think this is because the bVisible:true will trigger the DataTables column width calculation, as will sWidth. This is going to be an issue in a tab since there is no height and width to calculate on a tab which is hidden, thus this is where I suspect the problem is.

What you need to do is to call fnAdjustColumnSizing when the tab is made visible - like in this example: http://datatables.net/release-datatables/examples/api/tabs_and_scrolling.html

Allan

NigelRMurray

Thanks for the suggestion Alan but no luck.

First, I can confirm that setting sWidth: "80px" does cause the same problem as you suspected.

Second, I called fnAdjustColumnSizing from the tab "show" event as you suggested but it did not fix the problem when bVisible: false on one of the columns. I also did confirm that the fnAdjustingColumnSize was called when the tab was shown. (Btw, in the code you provided I had to change div.dataTables_scrollBody to div.dataTables_wrapper.)

Hmmm ...

allan

Good to know my suspicions are correct :-). Hopefully we can't be too far away from a fix then.

[quote]NigelRMurray said: (Btw, in the code you provided I had to change div.dataTables_scrollBody to div.dataTables_wrapper[/quote]

Ah yes - sorry about that - that's because you aren't using scrolling. You say that it didn't fix it when bVisible:false was on one of the columns - did it fix it when sWidth was on one? I think we are getting into the realm of some deeper debugging being needed. Is there any way you can provide me with a link - you can send by the contact form if you don't want to make it public ( http://datatables.net/contact ).

Allan

NigelRMurray

Hi Allan. No, the problem was not solved for either bVisible: false or sWidth: 80px on one column.

I don't have a way to send you the link but I have stripped down the application in a way that should make the debugging straightforward. I sent you this example through the contact form.