row details bug?

vivendi

I'm not sure if this is suppose to be working like this, but i get some weird behaviour when i disbale a certain option.

The following code DOES work:

Example taken from the examples folder: examples -> server_side -> row_details.html

[code]
var oTable;

/* Formating function for row details */
function fnFormatDetails ( nTr )
{
var aData = oTable.fnGetData( nTr );
var sOut = '';
sOut += 'Rendering engine:'+aData[2]+' '+aData[5]+'';
sOut += 'Link to source:Could provide a link here';
sOut += 'Extra info:And any further details here (images etc)';
sOut += '';

return sOut;
}

/* Event handler function */
function fnOpenClose ( oSettings )
{
$('td img', oTable.fnGetNodes() ).each( function () {
$(this).click( function () {
var nTr = this.parentNode.parentNode;
if ( this.src.match('details_close') )
{
/* This row is already open - close it */
this.src = "../examples_support/details_open.png";
oTable.fnClose( nTr );
}
else
{
/* Open this row */
this.src = "../examples_support/details_close.png";
oTable.fnOpen( nTr, fnFormatDetails(nTr), 'details' );
}
} );
} );
}

$(document).ready(function() {
oTable = $('#example').dataTable( {
"bProcessing": true,
"bServerSide": true,
"sAjaxSource": "http://datatables.net/examples/examples_support/server_processing_details_col.php",
"aoColumns": [
{ "sClass": "center", "bSortable": false },
null,
null,
null,
{ "sClass": "center" },
{ "sClass": "center" }
],
"aaSorting": [[1, 'asc']],
"fnDrawCallback": fnOpenClose
} );
} );
[/code]

The above code works fine! Nothing wrong with it. But because 'bServerSide' is set to 'true' then that means the filtering is also done on the server, right? But i don't want that. So if i set the to false, i expect t hat all the filtering would be done by DataTables.

But what i get is an error saying the 'oTable' is undefined and no data is loaded!

When i comment out the following line:
"fnDrawCallback": fnOpenClose

Then all data IS loaded and the filtering DOES work, but ofcourse the row details don't work anymore!

Is this a bug!? And can this be fixed somehow..???

allan

No it's not a bug because oTable genuinely is undefined at the time you are trying to use it. When not using server-side processing, fnDrawCallback is fired _before_ the initialisation of the table is fully complete (i.e. before the resulting object is assigned to oTable).

The way I would suggest dealing with this situation is to use live events - like this: http://datatables.net/examples/api/row_details.html - which shows the same basic idea as above, but for client-side processing.

Allan

vivendi

Thanks for your fast response!

I was afraid that i had to use 'live events'. Getting the data from the server when a user opens a row seemed like a perfect solution to me. Too bad filtering can only be done by the server. Guess i'll have to make a choice here, live events or filter by server.

allan

I'm not sure I follow - DataTables has client-side filtering if you want that ( http://datatables.net/examples/basic_init/zero_config.html ), or you can just Ajax load the data you want from the server using the live event.

Allan

vivendi

Yes, i know. I want to use the client side filtering in combination with 'sAjaxSource'. So i load the data from my server.

That does work. But i also want to add row details to my table. Exactly like the example 'row_details.html' (in the server_side folder).

But i want that filtering is done client sided and NOT server sided. But that doesn't seem to be possible...?


So basically try to open the 'row_details.html' example and try to make the filter happen client sided. That's not going to work.

allan

You can get data from the server in a single "get" like this: http://datatables.net/examples/data_sources/ajax.html . This will load all data at initialisation, and then all processing is done on the client-side (filtering etc). When you can have the row details along with that.

Allan

vivendi

*something went wrong, rewriting my post*

vivendi

Thanks, i thnik i have it working!