drill down detail rows for multiple tables

roxstyle

i want to have several tables with different sorting options, etc. have ability top open.

i am using from sample:

$(document).ready(function() {
/*
* Initialse DataTables, with no sorting on the 'details' column
*/
var oTable = $('#example').dataTable( {
"aoColumnDefs": [
{ "bSortable": false, "aTargets": [ 0 ] }
],
"aaSorting": [[1, 'asc']]
});

i have tried several things, lastly:

i am trying to target ALL class .display tables as datatables, then target each "id", but i get a Warning: Cannnot reinitialize DataTable.

$(document).ready(function() {
/*
* Initialse DataTables, with no sorting on the 'details' 'action' column
*/

var oTable = $('.addcontent .display').dataTable();


$('#pitches').dataTable( {
"bAutoWidth": false,
"bJQueryUI": true,
"bFilter": false,
"bLengthChange": false,
"aoColumnDefs": [
{ "bSortable": false, "aTargets": [ 0 , 9 ] }
],
"aaSorting": [[1, 'asc']]
});


$('#pitches-grid').dataTable( {
"bAutoWidth": false,
"bJQueryUI": true,
"bFilter": false,
"bLengthChange": false,
"aoColumnDefs": [
{ "bSortable": false, "aTargets": [ 0 , 10 ] }
],
"aaSorting": [[1, 'asc']]
});


here is a current link: http://www.roxstyle.com/roxprojects/blssi/studiosystem-v4-2013/ssv4/html-nbcu/syfy-pitchgrid.html
Thank you.

roxstyle

When i have a single datatable declared like the sample..the "details" functions as expected. But i want to have six datatables, so i am trying to make this more universal, using the format in the example for bRetrieve. I have tried both

initTable();
tableActions();

and even when i don't get an error, the details row does not work.
i have tired the initTable() alone. I can tell the js gets through the intTable()

how can i make the click event universal?


http://www.roxstyle.com/roxprojects/blssi/studiosystem-v4-2013/ssv4/html-nbcu/syfy-pitchgrid.html

Source:
// http://www.datatables.net/release-datatables/examples/api/row_details.html

/* Formating function for row details */
function fnFormatDetails ( oTable, nTr )
{
var sOut = '';
sOut += 'Agent:NAAgency:NA';
sOut += 'Sizzle:https://vimeo.com/48169646 (pw: fixation10)Treatment:NA';
sOut += 'Rel:NAT1:6/28/12';
sOut += 'T2:7/5/1 8/28/12 9/4/12 12/7/12 1/8/13T3:NA';
sOut += 'Diversity:NoT3:NA';
sOut += 'Notes:';
sOut += '';

return sOut;
}

$(document).ready(function() {
initTable();
//tableActions();

/*
* Initialse DataTables, with no sorting on the 'details' column
*/
function initTable () {
return $('#pitches').dataTable( {
"bAutoWidth": false,
"bJQueryUI": true,
"bFilter": false,
"bLengthChange": false,
"bInfo": false,
"bPaginate": false,
"bRetrieve": true,
"bDestroy": true,
"aoColumnDefs": [
{ "bSortable": false, "aTargets": [ 0, 9 ] }
],
"aaSorting": [[1, 'asc']]
} );
return $('#nbc-pitches-grid').dataTable( {
"bAutoWidth": false,
"bJQueryUI": true,
"bFilter": false,
"bLengthChange": false,
"bInfo": false,
"bPaginate": false,
"bRetrieve": true,
"bDestroy": true,
"aoColumnDefs": [
{ "bSortable": false, "aTargets": [ 0, 10 ] }
],
"aaSorting": [[1, 'asc']]
} );
}

// var oTable = $('#pitches').dataTable( {
// "bAutoWidth": false,
// "bJQueryUI": true,
// "bFilter": false,
// "bLengthChange": false,
// "bInfo": false,
// "bPaginate": false,
// "bRetrieve": true,
// "aoColumnDefs": [
// { "bSortable": false, "aTargets": [ 0, 9 ] }
// ],
// "aaSorting": [[1, 'asc']]
// });



var oTable = initTable();
var oControl = $(oTable).find('tbody td.control');
// perform API operations with oTable


/* 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
*/
$('oControl').on('click', 'img', function () {
var nTr = $(this).parents('tr')[0];
if ( oTable.fnIsOpen(nTr) )
{
/* This row is already open - close it */
this.src = "../_assets/img/data-tables/details-open.png";
oTable.fnClose( nTr );
}
else
{
/* Open this row */
this.src = "../_assets/img/data-tables/details-close.png";
oTable.fnOpen( nTr, fnFormatDetails(oTable, nTr), 'details' );
}
} );


} );