sScrollX at 100% makes table larger than page

zway

Issue:

http://imgur.com/UFS3f

What I want is for the width of the table to be the width of the window, but I have ~43 columns there. This is causing it to take the width that the table takes up when it's drawn to the screen...

I tried setting sScrollX to a px count, but then the headers/data don't line up...

allan

Hi zway,

You will indeed need to set sScrollX to a pixel value - like in this example: http://datatables.net/examples/basic_init/scroll_x.html . I don't get what you mean by the headers and data now showing up though. Can you give us a link to an example of that happening?

Thanks,
Allan

zway

Here's what happens when I set the size manually in px count.

It's more pronounced the more columns I have...

http://imgur.com/FeZ1a

zway

oh and here's the JS:

[code]
var fixedData;
var columns;
var json;
var finished = 0;
var functionToCall;
function pageWidth() {return window.innerWidth != null? window.innerWidth: document.body != null? document.body.clientWidth:null;}
$(document).ready(function () {
var width = pageWidth() - 23;

$('#ptDataTable').dataTable({
"sDom": 'C<"clear"><"H"lfr>t<"F"ip>',
"aoColumnDefs": [
<%=ColumnDefs%>
],
"oColReorder" : {
"aiOrder": [ <%=DefaultColumnOrder%> ]
},
"bStateSave": true,
"bAutoWidth": true,
"bProcessing": false,
"bJQueryUI": true,
"sWidth" : "100%",
"sScrollY" : 380,
"sScrollX" : width + "px",
"sScrollXInner" : "180%",
"bScrollCollapse" : true,
"sPaginationType": "full_numbers",
"sAjaxSource": "<%=ServiceUrl%>",
"fnServerData": function (sSource, aoData, fnCallback) {
functionToCall = fnCallback;
$.getJSON(sSource, aoData, fixData);
}
});
});
function fixData(data) {
columns = [
<%=Columns%>
];
fixedData = new Array();
var c = 0;
for (var i in data) {
fixedData[c] = new Array();
<%=DataArray%>
c++;
}
json = new Object();
json.aaData = fixedData;
json.aoColumns = columns;

finished = 1;
functionToCall(json);
new ColReorder($('#ptDataTable').dataTable(), { "aiOrder": [ <%=DefaultColumnOrder%> ] });
$('#ptDataTable').dataTable().fnAdjustColumnSizing();
}
function Reset() {
new ColReorder($('#ptDataTable').dataTable(), { "aiOrder": [ <%=DefaultColumnOrder%> ] });
$('#ptDataTable').dataTable().fnAdjustColumnSizing();
}
[/code]

zway

Alan, after looking at a few pages I'm using this in, it seems to only happen when the data can't fit nicely in the sScrollXInner's width...I think I'm going to have to recalc the sScrollXInner size based on the number of columns and some multiplier...

If I don't set sScrollXInner, will bAutoWidth calculate the width that everything needs to be and scroll only if neccessary?

allan

Yes indeed - try simply removing the sScrollXInner parameter and that should make the table easier to read, as it will take up as much space as is required. You might also want to consider using 'thead th { white-space: no-wrap; }' in order to get the table header text all on one line.

Allan

zway

Thanks Allan! That fixed it close enough to perfect for me (think my width calculation formula needs some tweaking, but it's only off by a few pixels depending on the size of the table).