datatables - hidden row to query a different table for data based on first table (row) value

paulrod

Hi,

I have a page that selects data from a company table. The results are displayed and datatables styles the data with no issue. However - I wish to use the hidden row option in datatables to query a second table called customers based on the value of , in this case column 1 (aData[1]).

I modified using the samples i found on your site a function called fnFormatDetails() that draws the second table (the hidden row) and post out via ajax post the url/parameters i need. I can see them post in firebug and my response back from a php script. However I cannot for the life of me figure out how to get this data to populate the fnFormDetails table.

My knowledge of jquery/ajax is limited. I am just starting on this. PHP I am ok on.

Thank you very much!
Paul

paulrod

sent a payment for your help. notes attached to payment, with further questions regarding your time. Thank you!

allan

Hi paulrod,

Thanks for the donation :-). fnOpen returns the TR element that it creates - so what you could do (assuming I've understood correctly) is something like this:

[code]
var newRow = oTable.fnOpen( nTr, fnFormatDetails(oTable, nTr), 'details' );

$.ajax( {
"dataType": 'json',
"type": "POST",
"url": sSource,
"data": aoData,
"success": function ( json ) {
$('td', newRow).html( json.htmlParameter );
}
} );
[/code]
You could write "loading" into the cell for while the Ajax is going on as well to make it clear what is happening :-)

Regards,
Allan

paulrod

Allan,
Thank you I will try this. So I am changing your example code to open the table from;

/* Open this row */
this.src = "_img/details_close.png";
oTable.fnOpen( nTr, fnFormatDetails(oTable, nTr), 'details' );

to

this.src = "_img/details_close.png";
var newRow = oTable.fnOpen( nTr, fnFormatDetails(oTable, nTr), 'details' );

and in the fnFormatDetails function i am inserting the ajax call?

Thanks
Paul

paulrod

if this goes in the fnFormatDetails function how do I get the results into sOut to be returned?

paulrod

just to clarify;

I now have the following;

[code]
$('#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 = "_img/details_open.png";
oTable.fnClose( nTr );

} else{
/* Open this row */
this.src = "_img/details_close.png";
//oTable.fnOpen( nTr, fnFormatDetails(oTable, nTr), 'details' );
var newRow = oTable.fnOpen( nTr, fnFormatDetails(oTable, nTr), 'details' );

}
} );
[/code]

so where in here is the ajax call?

[code]
function fnFormatDetails ( oTable, nTr )
{
var aData = oTable.fnGetData( nTr );
var sOut = '';
sOut += 'Rendering engine:'+aData[1]+' '+aData[11]+'';
sOut += 'Link to source:Could provide a link here';
sOut += 'Extra info:And any further details here (images etc)';
sOut += '';
sOut += '';
return sOut;
}
[/code]

the php will grab from the ajax post the value in aData[1] and pull up a series of records. I need to return those records back. I suppose the records returned from the php script will have to be json formated (var:val) ? If thats the case then this function will need to parse out and create the table rows for each record. not sure how.

thanks again!

paulrod

sorry to keep posting, but i think i figured it out. i now have;

[code]
this.src = "_img/details_close.png";
//oTable.fnOpen( nTr, fnFormatDetails(oTable, nTr), 'details' );
sID = fnFormatDetails(oTable, nTr)

var newRow = oTable.fnOpen( nTr,
$.ajax( {
dataType: 'json',
type: "POST",
url: "processor.php",
data: "custid="+sID,
success: function ( json ) {
var tableHead = '';
$('td', newRow).html('Company IDempl_fnameempl_lnameempl_titleempl_phoneempl_faxempl_cell'+ json.postsuccess.................+'' );}} ), 'details' );

}
} );
[/code]

[code]function fnFormatDetails ( oTable, nTr )
{
var aData = oTable.fnGetData( nTr );
return aData[1];
}
[/code]

allan

Yup that looks like to should work okay (although I don't know what $.ajax() returns... whatever it is, DataTables will be writing it into the cell...). I think I personally would have done something a little bit more like this:

[code]
var newRow = oTable.fnOpen( nTr, "Loading data..." );
$.ajax( {
dataType: 'json',
type: "POST",
url: "processor.php",
data: "custid="+sID,
success: function ( json ) {
... process for html
$('td', newRow).html( newHTML );
}
} );
[/code]
As it allows a 'loading' indicator to be put into the cell while the XHR is off getting the new data :-)

Regards,
Allan