Show Hide Info Trouble

jgroh

Hi all,

I have tried to use DataTables for a client list and incorporate the show/hide details. I started with a php/mysql recordset to get my data then used a repeating table in Dreamweaver to set it up. It works great but I am having issues with the "show more details". It only shows the first record's info for each row, even though it works for the main list. Here is some of the coding I am using:

/* Formating function for row details */
function fnFormatDetails ( oTable, nTr )
{
var aData = oTable.fnGetData( nTr );
var sOut = '';
sOut += 'Funding Source:<?php echo $row_rsReferralList['name_fund']; ?>';
sOut += 'Waiver Qualified:<?php echo $row_rsReferralList['waiver_qualified_ref']; ?>';
sOut += 'Spanish Speaking:<?php echo $row_rsReferralList['spanish_speaking_ref']; ?>';
sOut += 'Service Coordinator:<?php echo $row_rsReferralList['service_coordinator_ref']; ?>';
sOut += '';

return sOut;
}

$(document).ready(function() {
/*
* 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']]
});

/* 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).parents('tr')[0];
if ( oTable.fnIsOpen(nTr) )
{
/* 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' );
}
} );

Its almost as if I need to filter the id of the record to show the more info section. Does anyone have any ideas?
Please help!

} );

jgroh

I guess I should rephrase my question...how can you show more details of a record from a database? The examples just show static info (could be text or images here...etc) and not more details pulled from the database?

jgroh

Bump

allan

Hi,

So what you've got above does look fairly close, however, let me first point out why it is going wrong, before suggesting a few solutions.

These are the first few lines of code from your fnFormatDetails function:

[code]
var aData = oTable.fnGetData( nTr );
var sOut = '';
sOut += 'Funding Source:<?php echo $row_rsReferralList['name_fund']; ?>';
[/code]

Line 1 will get an array of data from the table for the row that was clicked on. Fine.
Line 2 makes the inner table element. Fine.
Line 3 is 'static' in Javascript - not fine.

When the page is rendered by PHP your function will look like this:

[code]
var aData = oTable.fnGetData( nTr );
var sOut = '';
sOut += 'Funding Source:fund name';
[/code]

i.e. the data is static - it was rendered by PHP before being sent to the client-side - which is why you are only getting the details for the first row and having them repeated.

So, moving on to a solution. There are two methods that I would recommend:

1. This is my personal preference for this kind of data, but it is a more invasive change. Switch to Ajax loading the data for your table, and use objects to represent the data in each row. There is an example of that here: http://datatables.net/release-datatables/examples/ajax/objects.html . The key advantage of this method is that you can add any data you want to the object, and the table will only render in the columns what you specifically tell it to - while you can still access the whole data object using fnGetData . So your fnFormatData function would now look like this:

[code]
var data = oTable.fnGetData( nTr );
var sOut = '';
sOut += 'Funding Source:'+data.name_fund+'';
[/code]

Note the Javascript variable used on line 3.

2. Very similar to the above, but rather than using Ajax sourced data, you simply put the extra data you want to be available for your show/hide row into the table as extra columns and then hide those columns using the bVisible option. This is basically the method that I use here: http://datatables.net/release-datatables/examples/api/row_details.html (although I don't have any hidden columns - an example of that is here: http://datatables.net/release-datatables/examples/basic_init/hidden_columns.html ).

So now fnGetData gives you an array of all the data that DataTables read from the table - thus your fnFormatData function will look like:

[code]
var data = oTable.fnGetData( nTr );
var sOut = '';
sOut += 'Funding Source:'+data[6]+'';
[/code]

I'm not sure if [6] is the correct column index for you(!) you would change that to whatever the column index with that specific bit of data is :-).

So - hopefully you'll be able to see how the the first option is ultimately a cleaner solution, but it does mean using Ajax sourced data rather than dynamically reading from the table. The second solution allows it to work using the current set up.

Hope this helps!

Regards,
Allan

jgroh

Thanks for that info Allan! The second solution worked great.