Titles not aligning

dmclean

I'm having a problem where resizing the page or bringing it up in a browser window smaller than a certain width results in the column titles not being properly aligned. Clicking in one of the titles (to sort on that column) will fix the alignment but it just doesn't look professional.

I'm using DataTables 1.8.2 (non-minimized version) with JQuery 1.7.1 (again, non-minimized version) and I would rather not upgrade until I wrap up this iteration and start the next one.

Any suggestions on how to correct the problem (if you magically know the answer), or what I can do to find out the underlying source of the problem would be greatly appreciated.

I tried running the debugger thingy but all I got was a big green square - no code like it used to give.

allan

Hi,

I'm going to guess that you have scrolling enabled, since you say that the column titles aren't correctly aligned - is that correct?

What you can do is something like this:

[code]
$(window).resize( function () {
$('#myTable').dataTable().fnAdjustColumnSizing( false );
} );
[/code]

That will cause DataTables to correct the column sizing based on the new data. The 'false' for the parameter is used to stop DataTables doing a full redraw, since that isn't needed in this case.

> I tried running the debugger thingy but all I got was a big green square - no code like it used to give.

That's very odd! It should only go green when a code has been returned from the server. I'll check into that a bit more and see if there might be a compatibility issue with DataTables 1.8.2.

Regards,
Allan

dmclean

Yes, we use scrolling rather than multiple pages.

That worked very nicely. Thank you!

dmclean

Except that it only works on one table. I have three different tables that I swap in and out.

I have a variable "oTable":

[code]
contextTable = $('#contextData').dataTable({
// stuff here
});

oTable = contextTable;
[/code]

I use oTable in misc DataTables related functions. Shouldn't I be able to write something like what I have shown below? I tried it (with and without the dataTable() part) and it didn't work.

[code]
$(window).resize( function () {
if (oTable != null) {
oTable.dataTable().fnAdjustColumnSizing( false );
}
} );
[/code]

allan

So there are a couple of options here:

1. Use each table variable in turn to resize:

[code]
$(window).resize( function () {
t1.dataTable().fnAdjustColumnSizing( false );
t2.dataTable().fnAdjustColumnSizing( false );
// etc
} );
[/code]

2. Get all DataTables and loop over them (this particular code uses DataTables 1.9.1+ only, although the principle can be used in 1.8 and before):

[code]
$(window).resize( function () {
var tables = $.fn.dataTable.fnTables();
for ( var i=0 ; i

dmclean

Never mind. It works - I think it was a caching issue.

Sometimes the universe just likes to mess with us, I guess.

allan

Only sometimes?! :-)

Good to hear it works now.

Allan