Table Column do not resize with sScrollY
Table Column do not resize with sScrollY
DanMorin
Posts: 28Questions: 0Answers: 0
When I specify a value for sScrollY, the scroll bar appear, however if I resize the browser, the columns of the table do not resize with the browser.
[code]$('#example').dataTable(
{
"sScrollY": "200px",
}[/code]
If I sort, then the column are resized. One interesting thing is if I reduce the browser, the columns take several sorting before fully adjusting to the size of the window.
[code]$('#example').dataTable(
{
"sScrollY": "200px",
}[/code]
If I sort, then the column are resized. One interesting thing is if I reduce the browser, the columns take several sorting before fully adjusting to the size of the window.
This discussion has been closed.
Replies
[code]
$(window).resize( function () {
oTable.fnAdjustColumnSizing();
} );
[/code]
This is needs in order to allow DataTables to recalculate the optimal column widths for the resized table.
Allan
I would suggest adding the solution code to the documentation of sScrollY because I had no idea the code above was working. I am a newbie in JavaScript, as I started about two weeks ago.
Allan
Allan
[quote]Uncaught TypeError: Object [object Object] has no method 'fnAdjustColumnSizing'[/quote]
Here is my code:
[code]g_dateResizeTables = new Date(Date.now() + 1000*60*60*24*365); // This variable is to determine when it is the time to resize the tables after the user is done resizing the browser window
$(window).resize(function()
{
g_dateResizeTables = new Date(Date.now().getTime() + 500); // Adjust the columns width when the user is idle, about 500ms later.
});
// This function is called every second, to perform updates on the UI
function OnTimer()
{
// Check if is time to resize the tables
if (Date.now() > g_dateResizeTables)
{
g_dateResizeTables = new Date(Date.now().getTime() + 1000*60*60*24*365);
$(".myDataTable").fnAdjustColumnSizing();
}
}
setInterval(OnTimer, 1000);
[/code]
It appears the class selector for myDataTable does not return a table object.
Also, I am a bit puzzled why initializing the date sometimes work with Date.now() and sometimes I must enter Date.now().getTime(). I know this last question has nothing to do with your data table, however I am asking in case you already know the answer.
[code]
$(".myDataTable").dataTable().fnAdjustColumnSizing();
[/code]
Regarding the Date question - I'm afraid I don't know off the top of my head. Personally I would always be explicit about the user - if you want the milliseconds from the epoch, then call getTime.
Allan
[quote]DataTables warning (table id = 'myDataTable'): Cannot reinitialise DataTable.
To retrieve the DataTables object for this table, pass no arguments or see the docs for bRetrieve and bDestroy[/quote]
When I try
[quote]$(".myDataTable").dataTable({'bRetrieve': true}).fnAdjustColumnSizing();[/quote]
I get the error
[quote]Uncaught TypeError: Cannot read property 'asSorting' of undefined[/quote]
[code]
$("#myDataTable").dataTable().fnAdjustColumnSizing();
[/code]
At the moment it might be matching multiple tables with that selector.
Allan
[code]
var a = $.fn.dataTableSettings;
for ( var i=0, iLen=a.length ; i
One thing I noticed is when a vertical scroll bar is added, the width of the columns does not behave the same as when there is no vertical scroll bar. One notable behavior is when I stretch or maximize the browser, the columns get wider, however when I restore the window, the columns remain at maximum width.
Allan
The reason why it finds multiple table is that a separate table WITHOUT an ID is also created when using datatable. This other table contains the table headers as far as I can tell.
[code]
Col 1
Col 2
<---- Here's my table
Val 1Val 2
Val 3Val 4
[/code]
to get around this I used the selector [code]table[id*="TABLE"][/code] and named all my table with a similar ID.
Hope this helps somebody.