ROW_DETAILS from SERVER SIDE PROCESSING

rjbelandres

Hello everyone I'm new jQuery and especially on Datatables and I believe this is a great job, I tried using Jquery,php and DataTables on my inquiry website. I encountered a logical error I think in which upon clicking a button a Datatable will show with data, I tried to follow the Show and Hide Row Detail example together with the server side processing, the problem is after the button click the datas on the result datatables are not aligned and the open button does not appear on the 1st column. Can someone point me to the right direction on achieving my goal. I'll paste here the codes. Thanks and more power DATATABLES.

Declaration:

function fnFormatDetails ( oTable, nTr )
{
var aData = oTable.fnGetData( nTr );
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;
}


function getdonor(){
$("#mempin").hide();

/*
* Insert a 'details' column to the table
*/
var nCloneTh = document.createElement( 'th' );
var nCloneTd = document.createElement( 'td' );
nCloneTd.innerHTML = '';
nCloneTd.className = "center";

$('#example thead tr').each( function () {
this.insertBefore( nCloneTh, this.childNodes[0] );
} );

$('#example tbody tr').each( function () {
this.insertBefore( nCloneTd.cloneNode( true ), this.childNodes[0] );
} );

/*
* Initialse DataTables, with no sorting on the 'details' column
*/
var oTable = $('#example').dataTable( {

"aoColumnDefs": [
{ "bSortable": false, "aTargets": [ 0 ] }
],
"aaSorting": [[1, 'asc']],
"bProcessing": true,
"bServerSide": true,
"bJQueryUI": true,
"bRetrieve": true,
"sPaginationType": "full_numbers",
"sAjaxSource": "serverside/server_processing.php"

} );
/* Add event listener for opening and closing details
* Note that the indicator for showing which row is open is not controlled by DataTables,
* rather it is done here
*/
$('#example tbody td img').live('click', function () {
var nTr = this.parentNode.parentNode;
if ( this.src.match('details_close') )
{
/* This row is already open - close it */
this.src = "/images/details_open.png";
oTable.fnClose( nTr );
}
else
{
/* Open this row */
this.src = "/images/details_close.png";
oTable.fnOpen( nTr, fnFormatDetails(oTable, nTr), 'details' );
}
} );

$("#dynamic").fadeIn('slow');
}
Submit Form:


Lastname:


This field is required.

Firstname:


PIN#:




DATATABLES:





Rendering engine
Browser
Platform(s)
Engine version
CSS grade





Rendering engine
Browser
Platform(s)
Engine version
CSS grade