How to add details column with callback in case of ajax server (XHR) method ?

jinjung

Hello,

I'm trying to migrate "sName" to "mDataProp" for a cleanier datatable. All is OK, but not details column.
I can't create details column like demo example (http://datatables.net/examples/server_side/row_details.html), because I need to wait datatable for add it due to asynchronize XHR , is that no ?

Before (because I could not make it properly), on server side I created a "fake" column and filled it by an image on client side, it worked well. My id for print details was on my image.

Because "mDataProp" do more control about columns, this solution is not really good.
I tried to add demo example in callback fonction, "fnInitComplete", "fnDrawCallback", but it add a new detail column (one more than previous) for each call (change paginate for example).

Maybe the solution is to add example code in one of those callback and make a test for checking if column already exists ?
But I don't know how to do this ?

Is someone have a detail column with ajax method and draw it with client side, could you share your code ?

Thanks,
Jinjung

[code]
//////// THIS PART AS NO EFFECT - "EXAMPLE CODE" //////////
/*Insert a 'details' column to the table */
var nCloneTh = document.createElement( 'th' );
var nCloneTd = document.createElement( 'td' );
nCloneTd.innerHTML = '';
nCloneTd.className = "center";

/* removal of this fixes the column headers */
$('#tableId thead tr').each( function () {
this.insertBefore( nCloneTh, this.childNodes[0] );
} );
$('#tableId tbody tr').each( function () {
this.insertBefore( nCloneTd.cloneNode( true ), this.childNodes[0] );
} );

//////////////////////////////////////////////

// For information, solution used without mDataProp (working well):

oTable = $('#tableId').dataTable( {
"bProcessing": true,
"bLengthChange": true,
"bServerSide": true,
"bAutoWidth": true,
"bFilter" : true,
"sAjaxSource": "ajax/name.cgi", // server side send 4 columns
"aoColumnDefs": [
{
"fnRender": function ( oObj ) {
return '';
},
"sTitle": "+",
"sName": "id",
"aTargets": [ 0 ],
"bSortable" : false,
"bSearchable": false,
"sClass": "center",
"sWidth": 20
},
{ "sTitle": "Name", "sName": "name", "aTargets": [ 1 ] },
{ "sTitle": "Type", "sName": "type", "aTargets": [ 2 ] },
{ "sTitle": "State", "sName": "state", "aTargets": [ 3 ], "sDefaultContent": "-", "bSearchable": false, "bSortable": false }

],
"oLanguage": {
"sUrl" : "/trans-www/cfg/lang.txt"
},
"bPaginate": true,
"sPaginationType": "full_numbers",
"bJQueryUI": true,
"sDom": 'T<"clear"><"H"lrf>t<"F"ip>',
});
});
[/code]

jinjung

Version for testing in "running in JS Bin".
Next code works fine.

[code]
$(document).ready(function() {
// create element
var nCloneTh = document.createElement( 'th' );
var nCloneTd = document.createElement( 'td' );
nCloneTd.innerHTML = '';
nCloneTd.className = "center";
nCloneTh.className = "ui-state-default"; // for JUI
nCloneTh.value = '+'; //==> Add text on header, doesn't work

$('#example').dataTable( {
"bProcessing": true,
"bServerSide": true,
"iDisplayLength": 10,
"sAjaxSource": "scripts/server_processing.php",

/* Test if detail column exists, otherwise, create it */
"fnDrawCallback": function () {
/* Recreate detail column for each redraw */
$('#example thead tr').each( function () {
this.insertBefore( nCloneTh, this.childNodes[0] );
});
$('#example tbody tr').each( function () {
this.insertBefore( nCloneTd.cloneNode( true ), this.childNodes[0] );
});
}
} );
});
[/code]
Jinjung

jinjung

If someone has an idea for for adding value to header (nCloneTd.value= "+";) doesn't work.

I just see, http://www.datatables.net/forums/discussion/7293/
Therefore, I added a third method.

Add text value on header on client side is always open.

Jinjung