DataTables hidden row details and server-side processing

cmooz

Hi,

does it work to get DataTables hidden row details and server-side processing running in the same table?

i am getting the "+" image shown a very short time and then the data of the table loads

no images to open the hidden details visible any more

is it possible to get both features running at the same time?

i am using the latest beta of 1.5

thanks

allan

Hi cmooz,

It most certainly is possible, but it will require a bit of shifting around of my example code. What you will need to do is have an extra column returned from the server (or add it in using Javascript and a custom server callback function) to contain the image (you can't just add it to the DOM since the DOM is re-written by DataTables when using server-side processing.

Once you've got that you can add the request event listener to the image by using fnDrawCallback() and the event addition method shown here: http://datatables.net/examples/example_events_post_init.html

Hope this helps,
Allan

cmooz

Hi Allan,

i do not get it, sorry. Do you have an example? i can add the extra colum in my server_processing.php to the data but it doesn't work either.

thanks

allan

Hi cmooz,

I don't currently have an example of how to do this (http://datatables.net/donate might persuade me to create an example tho ;-) ), but basically what you have to do is apply the event handlers required for opening and closing the information row (fnOpen() and fnClose()) to the image that you have inserted in your new row (I presume it has the required image, or some other text in the new column?).

You need to combine the information shown in:

http://datatables.net/examples/example_events_post_init.html
http://datatables.net/1.5-beta/examples/api/row_details.html

Regards,
Allan

cmooz

ok i think i am on the way getting in running :)

just got one more error :]

oTable.fnSettings().aoData[iIndex] is undefined

when i click on the icon. where do i get information about aodata or where to define?

thanks

kind regards

allan

Where are you getting iIndex from? aoData is an internal DataTables parameter - and as such it's undocumented. You'd need to look at the source code to see what it is.

Allan

cmooz

i do not know where i'm getting it from i just copied this funktion

function fnFormatDetails ( nTr )
{
var iIndex = oTable.fnGetPosition( nTr );
var aData = oTable.fnSettings().aoData[iIndex]._aData;

var sOut = '';
sOut += 'Rendering engine:'+aData[1]+' '+aData[4]+'';
sOut += 'Link to source:Could provide a link here';
sOut += 'Extra info:And any further details here (images etc)';
sOut += '';

return sOut;
}

and got that error

cmooz

error appear while clicking on this element:

$sOutput .= "'',";

allan

I think I might see the problem - what is "this" in your onclick attribute? I rather suspect that it will be the img tag (it might actually be undefined). But fnFormatDefailts (and fnGetPosition) are expecting a TR element. So what is probably best is to drop the inline onclick attribute, and apply it dynamically (see the events examples).

Allan

cmooz

when i add this

$('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 = "img/details_open.png";
oTable.fnClose( nTr );
}
else
{
/* Open this row */
this.src = "img/details_close.png";
oTable.fnOpen( nTr, fnFormatDetails(nTr), 'details' );
}
} );
} );

before the table inits with this:

oTable = $('#plugs').dataTable( { ....

the data is not loading any more

allan

When the table loads initially it is empty right (the data is loaded from the server)?

So what you need to do is apply the events once you actually have something to apply events to! :-). This is on each table draw ( fnDrawCallback() ). Then the example function might do the trick.

Allan

cmooz

how much do i have to donate to get a running example?

allan

Heh - whatever it is worth to you :-). A donation always helps bump things up the to-do list...

cmooz

sent a few bucks, hope it helps getting the solution today :)

allan

Hi cmooz,

Thanks very much :-).

Here is the example you are looking for: http://datatables.net/1.5-beta/examples/server_side/row_details.html

As you can see there is a rendering function which is used to control what data is displayed in the details row. This can be readily modified to meet whatever requirements you have.

Hope this helps,
Allan

cmooz

thanks, it helps :)

but one more

i already use the fnRowCallback function for this "..." thing:

"fnRowCallback": function( nRow, aData, iDisplayIndex ) {
var $cell=$('td:eq(3)', nRow);
$cell.text(ellipsis($cell.text(),30));
return nRow;

},

how can i apply this and the fnOpenClose to the rowcallback at the same time?

thanks :)

allan

Hi cmooz,

I'm not sure I see where the problem is? You are using fnRowCallback() for the ellipisis, while my example uses fnDrawCallback(). You can have both defined - that shouldn't be a problem.

Allan

cmooz

i got it, my mistake sorry and thanks againg :)

cmooz

what can i do, to get the details only when clicked on the simbol and not when i click on any other img in that row?

allan

What you need to do is change the selector which applies the event handler to the image. This line:

$('td img', oTable.fnGetNodes() ).each( function () {

As you can see the selector is "td img" - so all images in the body will get this event handler. This would need to be modified to be whatever it is that you are matching on.

Allan

cmooz

but the other image is also td img, to what can i change this? can i add ids oder classes and if, how?

allan

Add classes, or selectors 'td:eq(0) img' for images in the first td element for example. Probably best to have a look at the jQuery documentation: http://docs.jquery.com/Selectors .

Allan

paky

Hi guys .... for get sOut var from Ajax call !!!??? A solution ?

[code]
function fnFormatDetails ( nTr )
{
var iIndex = oTable.fnGetPosition( nTr );

$.ajax
({
type:"POST",
url: 'includes/__ajax_gear/_get_details_progetti.php',
cache: false,
data:'',
success: function(msg)
{
sOut = msg;
//oTable.fnOpen( nTr, sOut, 'details' );
}
});
/*
var sOut = '';
sOut += 'Rendering engine:'+aData[1]+' '+aData[4]+'';
sOut += 'Link to source:Could provide a link here';
sOut += 'Extra info:And any further details here (images etc)';
sOut += '';
*/
return sOut;
}
[/code]

_get_details_progetti.php file return an echo with ' blablabla....'


why don't work ? thanks

cacko

because $.ajax by default is async, put async : false in the ajax options and .... prey.

and one more thing...ok here your code slight modified..no guarantee that it will work from the first time though

[code]
var sOut = $.ajax
({
type:"POST",
async: false,
url: 'includes/__ajax_gear/_get_details_progetti.php',
cache: false
});

return sOut.responseText;
}
[/code]

paky

Hi cacko thanks for suggest ;) but .... the problem now is reversed :) the empty table hyde (ok) and the 'details' table remains on the screen :( (sigh)

After several attempts, my code now is :

[code]
function fnFormatDetails ( nTr )
{
var aData = Table_list_project.fnGetData( nTr );
var id_progetto=aData[1];
$.ajax({
type:"POST",
url: 'includes/__ajax_gear/_get_details_progetti.php',
cache: true,
data:'id_proj='+id_progetto,
success: function(msg)
{
Table_list_project.fnOpen( nTr, msg, 'details' );
}
});

return '';
}
[/code]

with this code when I click on show and hide .... but on show make 2 tables (details table+ empty table) and on hide ... only hides the details table !!

thanks all