Table Column do not resize with sScrollY

Table Column do not resize with sScrollY

DanMorinDanMorin Posts: 28Questions: 0Answers: 0
edited February 2012 in Bug reports
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.

Replies

  • allanallan Posts: 63,498Questions: 1Answers: 10,471 Site admin
    When scrolling is enabled you need to call the fnAdjustColumnSizing method:

    [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
  • DanMorinDanMorin Posts: 28Questions: 0Answers: 0
    Thanks for the help - it is working. I reported this as a bug because I thought a table with a scroll bar would resize its columns the same way as a table without a scroll bar.

    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.
  • allanallan Posts: 63,498Questions: 1Answers: 10,471 Site admin
    Yeah its a bit of a funny one this one with scrolling enabled. I need to work out the best way of doing it. The reason I don't have that event handler by default is that it is computationally quite expensive, so can slow things down a little bit - but at the same time it is also required if you want scrolling and resizing... More work required on this particular topic I think.

    Allan
  • DanMorinDanMorin Posts: 28Questions: 0Answers: 0
    I just found a little problem is the footer is not adjusted when sScrollY is specified. Do you have a workaround for this?
  • allanallan Posts: 63,498Questions: 1Answers: 10,471 Site admin
    I'm not sure I quite understand - in what way is it not adjusted? It should be: http://live.datatables.net/ufucoc/edit .

    Allan
  • DanMorinDanMorin Posts: 28Questions: 0Answers: 0
    edited February 2012
    My apologies, I was missing one column
  • DanMorinDanMorin Posts: 28Questions: 0Answers: 0
    I decided to create e generic solution with a timer, and when the resize of the window is complete/idle, then I call fnAdjustColumnSizing(). The problem is I get the following error:

    [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.
  • allanallan Posts: 63,498Questions: 1Answers: 10,471 Site admin
    fnAdjustColumnSizing is a member of a DataTables instance - so you need to do:

    [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
  • DanMorinDanMorin Posts: 28Questions: 0Answers: 0
    edited February 2012
    I tried this before and this is the error I get:
    [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]
  • allanallan Posts: 63,498Questions: 1Answers: 10,471 Site admin
    Okay, try using the ID rather than the class:

    [code]
    $("#myDataTable").dataTable().fnAdjustColumnSizing();
    [/code]

    At the moment it might be matching multiple tables with that selector.

    Allan
  • DanMorinDanMorin Posts: 28Questions: 0Answers: 0
    I was trying to write generic code in the main .js file to automatically adjust the columns, so I do not have to repeat this code for every page. Each table has a different ID, however they all have the same class.
  • allanallan Posts: 63,498Questions: 1Answers: 10,471 Site admin
    In that case, try using the $.fn.dataTableSettings array. That contains a copy of the settings object for each table on the page, so what you would do is:

    [code]
    var a = $.fn.dataTableSettings;
    for ( var i=0, iLen=a.length ; i
  • DanMorinDanMorin Posts: 28Questions: 0Answers: 0
    edited February 2012
    Thank you. It is working.

    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.
  • allanallan Posts: 63,498Questions: 1Answers: 10,471 Site admin
    Could you possibly try it with the latest 1.9.1.dev image? It is possible that this issue is still present though.

    Allan
  • DanMorinDanMorin Posts: 28Questions: 0Answers: 0
    Sure, I will try a bit later. By the way, I noticed calling fnAdjustColumnSizing() on a table without the vertical scroll bar causes visual artifacts, such as the table width being smaller than the top and bottom headers.
  • simsim Posts: 1Questions: 0Answers: 0
    [quote]allan said: At the moment it might be matching multiple tables with that selector.[/quote]

    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.
This discussion has been closed.