DataTables

DanMorin

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.

$('#example').dataTable(
{
    "sScrollY": "200px",
    
}

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.

allan

When scrolling is enabled you need to call the fnAdjustColumnSizing method:

$(window).resize( function () {
  oTable.fnAdjustColumnSizing();
} );

This is needs in order to allow DataTables to recalculate the optimal column widths for the resized table.

Allan

DanMorin

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.

allan

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

DanMorin

I just found a little problem is the footer is not adjusted when sScrollY is specified. Do you have a workaround for this?

allan

I'm not sure I quite understand - in what way is it not adjusted? It should be: http://live.datatables.net/ufucoc/edit .

Allan

DanMorin

My apologies, I was missing one column <th></th>

DanMorin

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:

Uncaught TypeError: Object [object Object] has no method 'fnAdjustColumnSizing'

Here is my 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);

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.

allan

fnAdjustColumnSizing is a member of a DataTables instance - so you need to do:

$(".myDataTable").dataTable().fnAdjustColumnSizing();

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

DanMorin

I tried this before and this is the error I get:

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

When I try

$(".myDataTable").dataTable({'bRetrieve': true}).fnAdjustColumnSizing();

I get the error

Uncaught TypeError: Cannot read property 'asSorting' of undefined

allan

Okay, try using the ID rather than the class:

$("#myDataTable").dataTable().fnAdjustColumnSizing();

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

Allan

DanMorin

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.

allan

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:

var a = $.fn.dataTableSettings;
for ( var i=0, iLen=a.length ; i<iLen ; i++ ) {
  a[i].oInstance.fnAdjustColumnSizing();
}

Not hugely obvious I know, but that's how I would suggest doing it for now.

I'm looking, right at this moment as it happens, how best to integrate dynamic resizing while scrolling into the DataTables core.

Allan

DanMorin

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.

allan

Could you possibly try it with the latest 1.9.1.dev image? It is possible that this issue is still present though.

Allan

DanMorin

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.

sim

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

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.

<div class="dataTables_scroll">
<div class="dataTables_scrollHead">
  <div class="dataTables_scrollHeadInner">
    <table class="dataTable">
      <thead>
        <tr role="row">
          <td class="ui-state-default"><div class="DataTables_sort_wrapper">Col 1<span class="DataTables_sort_icon"></span></div></td>
          <td class="ui-state-default"><div class="DataTables_sort_wrapper">Col 2<span class="DataTables_sort_icon"></span></div></td>
        </tr>
      </thead>
    </table>
  </div>
</div>
<div class="dataTables_scrollBody">
  <table id="THE_REAL_TABLE" class="dataTable"> <---- Here's my table
    <thead>
      <tr role="row" style="height: 0px; ">
        <td class="ui-state-default"></td>
        <td class="ui-state-default"></td>
      </tr>
    </thead>
    <tbody role="alert" aria-live="polite" aria-relevant="all">
      <tr class="odd"><td class=" sorting_1">Val 1</td><td class="">Val 2</td></tr>
      <tr class="even"><td class=" sorting_1">Val 3</td><td class="">Val 4</td></tr>
    </tbody>
  </table>
</div>
</div>

to get around this I used the selector

table[id*="TABLE"]

and named all my table with a similar ID.

Hope this helps somebody.

DataTables

Howdy, Stranger!

Support

Categories

In this Discussion