Two table and One Json file : Need help

panpansh

Hello ladies and gentlemen,
I put the code directly and comments after :

[code]

var oTable;
var oTable2;

$(document).ready(function() {

$("#table1 tbody").click(function(event) {
$(oTable.fnSettings().aoData).each(function (){
$(this.nTr).removeClass('row_selected');
} );
$(event.target.parentNode).addClass('row_selected');
} );

oTable = $('#table1').dataTable( {
"bProcessing": true,
"bJQueryUI": true,
"sPaginationType": "full_numbers",
"sAjaxSource": "sources/ExportRawPackets.json",
"aoColumns": [
{ "mDataProp": "date" },
{ "mDataProp": "vc" },
{ "mDataProp": "cadu" },
{ "mDataProp": "header" },
{ "mDataProp": "rawData" },
{ "mDataProp": "params" }
]
} );

oTable2 = $('#table2').dataTable( {
"bJQueryUI": true,

} );

} );

[/code]

and the json file :

[code]
{ "aaData": [
{
"date": "1.316441522560476E9",
"vc": "7",
"cadu": "1",
"header": "",
"rawData": "",
"params":
[

{"paramType" : "DoubleParam", "paramID" : "HM01006L", "value" : "3.0"},

{"paramType" : "DoubleParam", "paramID" : "HM01014L", "value" : "16.0"},

{"paramType" : "DoubleParam", "paramID" : "HM01002L", "value" : "1.0"},

{"paramType" : "DoubleParam", "paramID" : "HM01015L", "value" : "1.300147E7"},

]
}, // and others rows ....
...
[/code]

in the params columns I have "[object Object]" * x params..

My question if it's possible is : how to put the params of each row in another table (table2) with paramType, paramID and value when I click the row on the first table (table1) ?

Waiting to hear from you, I wish you a good day.

allan

Certainly it is - use fnGetData to get the data from the original row when clicked on and then fnAddData on the second table to show the data you want to.

Allan

panpansh

thanks for reply allan,

when I put this on $(document) I don't have any alert for the clicked td :

[code]
oTable.$('td').click( function () {
var sData = oTable.fnGetData( this );
alert( 'The cell clicked on had the value of '+sData );
} );
[/code]

the html is like this if you have an idea :

[code]




Date
VC
Cadu
Header
RawData
Params







Date
VC
Cadu
Header
RawData
Params



...

[/code]

I'm confused :/

allan

Me too - as you can see here ( http://live.datatables.net/oqasit/edit#javascript,html ) that code should work just fine.

Perhaps use a delegate event, rather than a static one: http://live.datatables.net/oqasit/2/edit

Allan

panpansh

wow it's work with this : http://live.datatables.net/oqasit/2/edit ! You are very reactive !
Please allan, you can explain to me in order to understand ? if it's not too abuse :)

allan

Have a look at this example: http://datatables.net/release-datatables/examples/advanced_init/events_live.html . Also the jQuery documentation for on: http://api.jquery.com/on/

Allan

panpansh

ok Allan :) ,
Now I get a value of a row/column with this :

[code]
$('#table1tbody').on('click', 'td', function () {
var sData = oTable.fnGetData( this );
alert( 'The cell clicked on had the value of '+ sData );
} );
[/code]

I wish to recover each time the parameters ("{ "mDataProp": "params" }" in table1) for display in the table2 and therefore hide the column in table1.

Each params in columns "params" is an object.

my second table is like this :

[code]
var oTable2 = $('#table2').dataTable({
"bJQueryUI": true,
"aoColumns": [
{ "mDataProp": "paramType" },
{ "mDataProp": "paramID" },
{ "mDataProp": "value" }
]
});
[/code]

panpansh

re :),
I get the objects (params) of row on click with your function getTd like that :

[code]
$('#table1 tbody').on('click', 'tr', function () {
var aPos = oTable.fnGetPosition(this);
var aPosClickedTr = "#table1 tbody tr:eq("+aPos+")";
var nTd = oTable.fnGetTd( $(aPosClickedTr)[0], 7 );
console.log( nTd );
} );
[/code]

now the objects is on nTd for each click on a row ...
I don't know how to use and add this objects to fill the table2 :/

Any help ? may be get the Id and load from the same json file but just with this id ?