sScrollX with a table that has a large number of columns.

kdg1972

Hi,

I am trying to set the size of a table that has a large number of columns and get the datatables scrollbar to show. The problem is that I can't set seem to set the sScrollX size to an amount less than the sum of the header widths. I can, but it has no effect. Can anyone suggest how to make this work?

Thanks,

Kevin.

twa

Can you post the code your initializing your datatable with?

And is your table just extending out showing all the columns?

allan

You should almost always set sScrollX to 100%, and if you want to make your table smaller, make a containing element will a smaller width.

As twa says, a link to an example would be very helpful.

Allan

kdg1972

var calcDataTableHeight = function() {
return $(window).height() - document.getElementById('tableSearch').offsetHeight - document.getElementById('tableButtons').offsetHeight - 100;
};

var calcDataTableWidth = function() {
return $(window).width() - 100;
};

var delay = (function(){
var timer = 0;
return function(callback, ms){
clearTimeout (timer);
timer = setTimeout(callback, ms);
};
})();

// setup datatables control
var oTable = $('#testData').dataTable({
"sDom": 'T<"clear"><"fg-toolbar ui-widget-header ui-corner-tl ui-corner-tr ui-helper-clearfix"lfr>t<"fg-toolbar ui-widget-header ui-corner-bl ui-corner-br ui-helper-clearfix"ip>',
"sPaginationType": "full_numbers",
"bPaginate": true,
"bFilter": false,
"bSort": false,
"bAutoWidth": true,
"sScrollX": calcDataTableWidth(),
"sScrollY": calcDataTableHeight(),
"iDisplayLength": 50,
"bScrollCollapse": true,
"bProcessing": true,
"bServerSide": true,
"bJQueryUI": true,
"bDeferRender": true,
"sAjaxSource": "/get_data" + params
});

// resize datatable
$(window).resize(function () {
delay(function(){
var oSettings = oTable.fnSettings();
oSettings.oScroll.sY = calcDataTableHeight();
oSettings.oScroll.sX = calcDataTableWidth();
oTable.fnDraw(true);
}, 500);
});

What seems to be happening is that the headers are fixed, they do not scroll when I move the scroll bar.

kdg1972

I managed to solve this problem.

The problem seemed to be that the table was nested. I pull it out to the form level and everything works fine.