Two table and One Json file : Need help
Two table and One Json file : Need help
panpansh
Posts: 14Questions: 0Answers: 0
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.
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.
This discussion has been closed.
Replies
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 :/
Perhaps use a delegate event, rather than a static one: http://live.datatables.net/oqasit/2/edit
Allan
Please allan, you can explain to me in order to understand ? if it's not too abuse :)
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]
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 ?