DataTables hidden row details and server-side processing
DataTables hidden row details and server-side processing
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
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
This discussion has been closed.
Replies
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
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
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
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
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
$sOutput .= "'',";
Allan
$('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
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
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
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 :)
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
$('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
Allan
[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
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]
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