Passing a variable with nested drill-down tables

PeteB

I've used the Serverside example for row_details and managed to implement a drill-down table which will include another table when clicked.

However, what I really want to do is pass a parameter so that only selected records are shown in the sub-table.

In my original setup of 2 seperate tables I had this code: [code]"bServerSide": true,
"sAjaxSource": "ajx_apphistory.php",
"fnServerData":function (sSource, aoData, fnCallback) {
aoData.push({"name":"playerno", "value":pjbplyrno });
$.getJSON( sSource, aoData, function(json) {
fnCallback(json)
});
}, [/code]
which used a GET to populate the variable pjbplyrno.

Now PlayerNbr is a hidden field on my first table, how do I pass it to the called php code?

I've used Debugger to show my current attempt with a hard-coded player number: http://debug.datatables.net/ijecov

Can anyone assist please?

Thanks,
Pete.

allan

> Now PlayerNbr is a hidden field on my first table, how do I pass it to the called php code?

Do you mean you want the value from the first table to be read dynamically when you make the Ajax call so PHP will see that latest value in $_GET['playerno']? If so, then I think you might need to use fnGetData on your first table to get the value from the selected row and then plug that into the data to be sent.

Btw - I'd recommend using fnServerParams rather than fnServerData if all you are doing is adding an extra variable :-)

Allan

PeteB

Allan,

thanks once again for the speedy (and accurate) response.

I have made the changes and almost have a final solution...

Everything is fine if I only have one row expanded. However, if I click on a second row I get error message: "DataTables warning (table id = 'example2'): Cannot reinitialise DataTable.

To retrieve the DataTables object for this table, pass no arguments or see the docs for bRetrieve and bDestroy"

Curiously, (to me) this only occurs if I click a row below the already opened row. If I click a row above, then all is o.k. and both rows are expanded.

I've updated the debugger: http://debug.datatables.net/eyatuh and would be grateful for any help

Should I ensure that all rows are closed before opening a new one? Or is it because both expanded rows include a datatable?

Thanks,
Pete.

allan

It sounds like you might be calling your open/close function on the details row as well as those in the main table (are you using a live event or something?). It might be an idea to check that the row is in the main DataTable (in the array fnGetNodes would do it, or checking for a class or something else).

Allan

PeteB

Allan,

your latest response went straight over my head.

I based everything on the drill-down-data example, here's my code [code] $('#example td.control').live( 'click', function () {
var nTr = this.parentNode;
var i = $.inArray( nTr, anOpen );

var sPlyr = oTable.fnGetData( nTr, 10 ); //column index for plyrnbr is 10, so get cell contents

$(anOpen).each( function () {
if ( this !== nTr ) {
$('td.control', this).click();
}
} );

if ( i === -1 ) {
$('img', this).attr( 'src', "images/details_close.png" );
var nDetailsRow = oTable.fnOpen( nTr, fnFormatDetails(oTable, nTr), 'details' );
$('div.innerDetails', nDetailsRow).slideDown();
anOpen.push( nTr );
oTable2=$('#example2').dataTable( {
"sDom": "rt",
"bProcessing": true,
"bPaginate": false,
"bServerSide": true,
"sAjaxSource": "test4_ajx_apphistory.php",
"fnServerParams": function ( aoData ) {
aoData.push( { "name":"playerno", "value":sPlyr } );
},
"aoColumns": [
{ "mDataProp": "ahID",
"bVisible": false
},
{ "mDataProp": "ahseasonID" },
{ "mDataProp": function (source, type, val) {
var num1 = parseInt(source.ah1stXV);
var num2 = parseInt(source.ah2ndXV);
var num3 = parseInt(source.ah3rdXV);
var num4 = parseInt(source.ah4thXV);
var num5 = parseInt(source.ah5thXV);
var num6 = parseInt(source.ahOthXV);
var ret1 = num1+num2+num3+num4+num5+num6;
return ret1;
}
},
{ "mDataProp": "ah1stXV"},
{ "mDataProp": "ah2ndXV"},
{ "mDataProp": "ah3rdXV"},
{ "mDataProp": "ah4thXV"},
{ "mDataProp": "ah5thXV"},
{ "mDataProp": "ahOthXV"},
{ "mDataProp": "jnrapps", "bVisible": false },
{ "mDataProp": "ahplayerID", "bVisible": false}
]
} );; // new line to initialise second table
} else {
$('img', this).attr( 'src', "images/details_open.png" );
$('div.innerDetails', $(nTr).next()[0]).slideUp( function () {
oTable.fnClose( nTr );
anOpen.splice( i, 1 );
} );
}
} ); [/code]

I've re-re-read it and my understanding is this:

a) I have a null column on my main table with sClass: control and an img: details_open

b) In my $(document).ready(function(), following the definition of my main table, I have a
$('#example td.control').live( 'click', function ()
which 'listens' for someone clicking the image in my null cell

c) I think the first line of this click function sets a pointer to the current row clicked:
var nTr = this.parentNode;

d) I think the 2nd line checks to see if the current row is found in the array anOpen (i.e. the list of already open rows from the main table):
var i = $.inArray( nTr, anOpen );

e) I've amended the original script at line 3 to add:
var sPlyr = oTable.fnGetData( nTr, 10 ); //column index for plyrnbr is 10, so get cell contents

f) I've then added another little function to close any currently open rows:
$(anOpen).each( function () {
if ( this !== nTr ) {
$('td.control', this).click();
}
} );

g) The rest of the function is as per the drill-down-example but I've added the definition of my details table as oTable2=....

So, is it the oTable.fnOpen that is causing the problem? Do I need to make this conditional?

Thanks, my envelope is certainly being stretched with this one...

Pete.

allan

Sorry for the massive delay in replying. I think I might need to see an example of this happening to fully understand the framework that it is being used in, and thus what the fix is.

What I'm wondering at the moment is what the nTr ("var nTr = this.parentNode;") is at the top of the function. If you console.log() that out, does it always belong to the master DataTable?

Allan