2 dependent Tables / details view

beginner_

Hi all,

I have a table of data. Each entry in this table has some "referenced data" (1:n) in database.

I would now like to have a second table below this "primary table" that display the data of the currently selected row. Each time the users clicks on another row in the primary table, the "details table" should be updated.

I'm a noob in javascript so I might need some rather detailed explanation.

Primary table has DOM as datasource. This should be fine since there should not be more than a handful of entries in it.

I looked at the Example with row selection but I am clueless on how to a) extract the id of this row b) use it ti trigger an update on the "details" table.

so far I have:
[code]
var formulaTable;
var componentsTable;
var giRedraw = false;

$(document).ready(function() {

formulaTable = $('#formulaTable').dataTable( {

"aoColumns": [
/* delete Button */ null,
/* Formula Name */ null,
/* Created */ null,
/* FormulaId */ { "bVisible": false }
]
});

componentsTable = $('#componentTable').dataTable( {
"bProcessing": true,
"sAjaxSource": 'componentsJSON.php',
"fnServerData": function ( sSource, aoData, fnCallback ) {
alert("Test"); /*Never seen this alert*/
/* Add some data to send to the source, and send as 'POST' */
aoData.push( { "name": "formulaId", "value": 4 } );
$.ajax( {
"dataType": 'json',
"type": "GET",
"url": sSource,
"data": aoData,
"success": fnCallback
} );
}
} );
/* Add a click handler to the rows - this could be used as a callback */
$("#formulaTable tbody").click(function(event) {
$(formulaTable.fnSettings().aoData).each(function (){
$(this.nTr).removeClass('row_selected');
});
$(event.target.parentNode).addClass('row_selected');
/* tip found through google but both methods result in an error*/
componentsTable.fnClearTable( 0 );
componentsTable.fnDraw();

});
} );
[/code]

beginner_

I'm kind of lost. How can I set aoData to the desired GET parameter?

beginner_

Ok, after a lot of googling, trial and error and common sense I found a working solution. I must admit I should probably a) really learn JS and b) learn/understand jquery/DOM.

Here some comments that might help some other js/jquery beginners like me:

I wasted a lot of time on how to construct the json usable by datatables. Meaning {"aaData":[...]}. I mean it is noted at some places that aaData is needed but no further explanation what that actually means. The solution was to actually look at the json text file used in the example. On server side I use php and I create the json by string concatenation...

The second thing that helped is the fnReloadAjax() plugin/function. (see http://datatables.net/plug-ins/api)

[code]
var formulaTable;
var componentsTable;

$(document).ready(function() {

formulaTable = $('#formulaTable').dataTable( {

"aoColumns": [
/* delete Button */ null,
/* Formula Name */ null,
/* Created */ null,
/* FormulaId */ { "bVisible": false }
]
});

// Table empty on page load
componentsTable = $('#componentsTable').dataTable({
"aaSorting": [[ 2, "desc" ]]
});

/*
* Called when clicking on a row in the formualTable.
* 1. change the CSS Styles of selected Row (and the row previosuly selected)
* 2. Get an array of selected rows (in this case always 1)
* 3. Get the data of the selected row
* 4. Get formulaId value (is in column 4 -> array posiiton 3)
* 5. (Re-)load components Table using forumla id.
*
*/
$("#formulaTable tbody").click(function(event) {
/*1.*/ $(formulaTable.fnSettings().aoData).each(function (){
$(this.nTr).removeClass('row_selected');
});
$(event.target.parentNode).addClass('row_selected');

/*2.*/ var anSelected = fnGetSelected(formulaTable);
/*3.*/ var aData = formulaTable.fnGetData(anSelected[0]);
/*4.*/ var formulaId = aData[3];
/*5.*/ componentsTable.fnReloadAjax('componentsJSON.php?formulaId=' + formulaId);
});
} );

/* Get the rows which are currently selected */
function fnGetSelected( oTableLocal )
{
var aReturn = new Array();
var aTrs = oTableLocal.fnGetNodes();

for ( var i=0 ; ifetch()){

$components = $components . '[';
$components = $components . '"' . $column1 .'",'; //text
$components = $components . '"' . $column2 .'",'; //text
$components = $components . '' . $column3 .'],'; //number
}
$components = substr($components,0,-1);
$components = $components . ']}';
$preparedStatement->close();
$con->close();

header('Content-type: application/json');
echo $components;