sScrollY not working
sScrollY not working
Hi,
I'm using DataTables and FixedColumn (both latest version).
My page generates an HTML table and apply DataTable on it.
Sometimes i need to completely remove the table from the page and destroy de DataTable object. This works fine but after this i generate again my HTML Table and use DataTable again. But my table, if my HTML table have a small number of rows DataTable seems to not use the "sScrollY" attribute and the result is to small.
Sample of code :
[code]
totalHeight = $(window).height();
headerHeight = $('#header').height() + 2;
footerHeight = $('#footer').parent().height();
titreModuleHeight = $('#page-heading').parent().height();
var height = totalHeight - (headerHeight + footerHeight + titreModuleHeight);
var columnWidth = ($('#header').width()-120)*12/100;
app.planningTable = $('#planning-table').dataTable({
"bDestroy": true,
"bRetrieve": true,
"bSort": false,
"bInfo": false,
"aaSorting": [],
"bFilter": false,
"bPaginate": false,
"bAutoWidth": false,
"aoColumnDefs": [
{
"sWidth": columnWidth+"px",
"aTargets": [ "_all" ]
}
],
"sScrollY": (height-125)+"px",
"sScrollX": "100%",
"sScrollXInner": ($('#planning-table thead tr:first th').length*columnWidth)+"px",
"bScrollCollapse": true
});
app.fixedColumns = new FixedColumns(app.planningTable, {
"sHeightMatch": "auto"
});
[/code]
Any ideas ?
I'm using DataTables and FixedColumn (both latest version).
My page generates an HTML table and apply DataTable on it.
Sometimes i need to completely remove the table from the page and destroy de DataTable object. This works fine but after this i generate again my HTML Table and use DataTable again. But my table, if my HTML table have a small number of rows DataTable seems to not use the "sScrollY" attribute and the result is to small.
Sample of code :
[code]
totalHeight = $(window).height();
headerHeight = $('#header').height() + 2;
footerHeight = $('#footer').parent().height();
titreModuleHeight = $('#page-heading').parent().height();
var height = totalHeight - (headerHeight + footerHeight + titreModuleHeight);
var columnWidth = ($('#header').width()-120)*12/100;
app.planningTable = $('#planning-table').dataTable({
"bDestroy": true,
"bRetrieve": true,
"bSort": false,
"bInfo": false,
"aaSorting": [],
"bFilter": false,
"bPaginate": false,
"bAutoWidth": false,
"aoColumnDefs": [
{
"sWidth": columnWidth+"px",
"aTargets": [ "_all" ]
}
],
"sScrollY": (height-125)+"px",
"sScrollX": "100%",
"sScrollXInner": ($('#planning-table thead tr:first th').length*columnWidth)+"px",
"bScrollCollapse": true
});
app.fixedColumns = new FixedColumns(app.planningTable, {
"sHeightMatch": "auto"
});
[/code]
Any ideas ?
This discussion has been closed.
Replies