Misaligned column headings using sScrollX sScrollY

felix_shaw

Hi there. Congratulations on writing such an awsome jQuery plugin. I was wondering if you could help me out. I am using DataTables with the server side stuff. It all works nicely except for the scrollX and scrollY options. When I use these (I have quite a large table of auditing data), the column headers become misaligned and the table looks rubbish!

Here is a picture:- http://martindawes.info/fs/datatables.bmp

Here is my code:

[code]
$("#fieldIndexTable").dataTable({
"sPaginationType": "full_numbers",
"bProcessing": true,
"bServerSide": true,
/*"aoColumns": [
{ sWidth: '170px' },
{ sWidth: '170px' },
{ sWidth: '130px' },
{ sWidth: '130px' },
{ sWidth: '130px' },
{ sWidth: '130px' },
{ sWidth: '130px' }
],*/
"sAjaxSource": applicationRoot + "Models/Audits.asmx/getFieldAudits",
"fnServerData": ajaxField,

"sScrollY": 500,
"sScrollX": "100%",
"sScrollXInner": "110%",
"sScrollYInner": "110%",
"bScrollCollapse": true,

"fnInitComplete": function () {
this.fnAdjustColumnSizing();
this.fnDraw();
}


});

function ajaxField(sSource, aoData, fnCallback) {
var stringify = new Array;
for (var i = 0; i < aoData.length; i++) {
stringify[i] = ",'" + aoData[i].name + "':'" + aoData[i].value + "'"
}
var data = stringify.join('');
data = "{" + data.substring(1, data.length) + "}";
$.ajax({
type: "POST",
url: sSource,
data: data,
contentType: "application/json; charset=utf-8",
success: function (data) { createJsonField(fnCallback, data); }
});
}

function createJsonField(fnCallback, data) {
fnCallback(eval('(' + data.d.data + ')'));
}
[/code]

[code]





Field Id


Batch Id


Start value


End value


Username


date & time


IP Address






[/code]


Any help greatly appreciated!

Felix.

allan

Thanks for the picture - I think I know what the issue is. Simply add the following to your CSS:

[code]
div.dataTables_scroll { clear: both; }
[/code]
Allan

felix_shaw

Cool...that worked! Thanks for the quick response, and like I said, for the awesome plugin.

felix_siegle

Hi there,

I have pretty much the same problem here: http://hardcore-disco.net/datatables.jpg
I'm using a DataTable within a JQuery Tab. My init code looks more or less the same as above. After a "fnDraw", everything looks fine but that only works if tab is active (and it looks ugly since it takes some time until the table is redrawn). Putting fnDraw into fnInitComplete like above has no effect. I also tried to add dataTables_scroll to my CSS file (I currently use your demo CSS file) but without success... Any ideas how I could solve this?

Thanks for this nice plugin,
all the best!

allan

Try calling fnAdjustColumnSizing ( http://datatables.net/api#fnAdjustColumnSizing ) when the table becomes visible - that allows DataTables to makes the required calculations once the browser has made the necessary information available.

Allan

miltonhowe

I am having a similar problem as Felix. I have been successfully using DataTables for a while inside jQueryUI Tabs, but only now want to use bAutoWidth: false, and sScrollX and sScrollY options. This is causing things to be all messed up :( see http://miltonhowe.org/DataTables_1284557680917.png

I have tried clearing the float as indicated above, and set my page to initialize the datatable while the appropriate tab is visible and not hidden. One thing that seems odd to me is when I look at the HTML, the headings are in a section which is wrapped not in a but a , which is not even valid HTML.
[code]




Policy #
...




[/code]

[code]
jQuery('#listGrid').dataTable({'bAutoWidth': false, 'bPaginate': false, 'bScrollInfinite': true, 'sScrollY' : '500px', 'sScrollX': '100%', 'sScrollXInner': '150%', 'aLengthMenu': [[20, 50, -1], [20, 50, 'All']], iDisplayLength: 20, 'aoColumns': [{'sWidth': '100px', 'bVisible': false, 'sType': 'formatted-num'},{'sWidth': '100px', 'sType': 'html'},{'sWidth': '100px'},{'sWidth': '100px'},{'sWidth': '100px', 'sType': 'formatted-num'},{'sWidth': '100px'},{'sWidth': '100px'},{'sWidth': '100px'},{'sWidth': '100px', 'sType': 'formatted-num'},{'sWidth': '100px', 'sType': 'formatted-num'},{'sWidth': '100px'},{'sWidth': '100px'},{'sWidth': '100px'},{'sWidth': '100px'},{'sWidth': '100px', 'sType': 'formatted-num'},{'sWidth': '100px', 'sType': 'formatted-num'},{'sWidth': '100px', 'sType': 'formatted-num'},{'sWidth': '100px', 'sType': 'formatted-num'},{'sWidth': '100px'},{'sWidth': '100px'}], 'bJQueryUI': true });
[/code]

allan

That HTML looks very odd indeed... Can you link us to an example showing the problem please? Have you got a CSS class on the table for which you can set the width to 100%? That would be worth a shot.

Allan

miltonhowe

It will not be a simple exercise to extricate the source of the page from the context, particularly since some of the scripts involved are eval()ed out of responses to xmlHttpRequests.
What I know is that the .dataTable() call is crashing and not returning.

I am getting this error in Chrome (nothing in Firebug for some reason):

jquery.dataTables.js:3786 Uncaught TypeError: Cannot read property 'style' of undefined

a quick look at the code tells me this is probably more of a consequence of the mangled HTML than the cause of it. I am still digging. I am going to peel some options out one by one and see if I can determine precisely which one is causing the weirdness.

allan

If you open the page without DataTables enabled, does the HTML for the table look valid and have what is required: http://datatables.net/usage/#prerequisites ?

Allan

miltonhowe

Ok, I put a breakpoint in _fnFeatureHtmlTable and I quickly identified my problem -- oSettings.nTable was a ! I was calling .dataTable() on a tag which wrapped the . Amazingly this has worked for me for months, as long as I did not invoke the scrolling stuff. I guess you could say this was an example of not having the correct prerequisites, but you might want to consider putting some validation to make sure the root element is actually a table! I do not have enough time to go back and see how the code managed to work with the in the first place but to my mind it should never have allowed me to use it like that in the first place.

So that has fixed the weird HTML problem. I am still having problems specifying my widths correctly when the ui tab is hidden (tried fnAdjustColumnSizing() but that did not work until I clicked on a heading and sorted which snapped everything in place). I think I will be able to figure this last bit out fairly quickly once I clean up all the messes I made testing the main problem.

Thank you very much Alan for your help today. Even though the problem was at my end, having timely feedback from the developer is always encouraging as it reminds one that the code is being actively maintained.

Milton.

allan

Hi Milton,

I'm amazed that it worked at all with a div being passed in! But kind of nice that the code was robust enough to do that anyway (in a way...). However, I think you are right - I'll add a check in to ensure that DataTables is operating on a table tag.

With the sizing - you need to call fnAdjustColumnSizing() once the table has been made visible. Browsers optimise the rendering by not calculating dimensions for elements which are display: none, hence there is no information for DataTables to be able to do the calculations at that point. This example shows scrolling with tabs: http://datatables.net/examples/api/tabs_and_scrolling.html

Regards,
Allan

lponce

Hi, Im experiencing a problem on IE8, already using the fnAdjustColumnSizing method, but it does not works fine on IE, any advice ?

allan

A link please?