child row example - get value from row onclick and pass it to child datatable
child row example - get value from row onclick and pass it to child datatable
I am trying to use child rows according this example https://www.datatables.net/examples/api/row_details.html
I have code implemented which shows me 4 columns from the json source (total 8 columns table) in parent table and is able to expand on click
what I want to implement is on row click when it is expanded take data from 1 column from json source which is not shown (ID) and pass it to next datatable as where clause
this is how I get json data
$(document).ready(function() {
var $subjektID;
var table2 = $('#dataTables-subjekt-childrow').DataTable( {
'dom': 'C<"clear">lfrtip',
'bDestroy':true,
'bStateSave': true,
'aaSorting': [[0, 'asc']],
'bProcessing': true,
'bServerSide': false,
'sAjaxSource': '../list_subjekt2.php',
'bJQueryUI': true,
'bAutoWidth': false,
'bFilter':true,
'bLengthChange': true,
'bPaginate': true,
'bSort': true,
'iDisplayLength': 10,
'bInfo': true,
'sPaginationType': 'full_numbers',
'language': {"url": "../json/datatables_slovak.json"},
'aoColumns': [
{
"className": 'details-control',
"orderable": false,
"data": null,
"defaultContent": ''
},
{ "data": "0" },
{ "data": "1" },
{ "data": "2" },
{ "data": "3" }
],
'order': [[1, 'asc']]
} );
this is my json source
{
"draw": 0,
"recordsTotal": 2,
"recordsFiltered": 2,
"data": [
{
"0": "testovacia firma1",
"1": "Bratislava III",
"2": "Bratislavský",
"3": "SRO",
"4": "Nová 19, Bratislava",
"5": "51616818",
"6": "testovaci subjekt cislo 1",
"7": "0000-00-00 00:00:00",
"8": "1",
"DT_RowId": "row_1"
},
{
"0": "blabla firma 2",
"1": "Nitra",
"2": "Nitriansky",
"3": "AS",
"4": "Neznáma ulica 5, Nitra",
"5": "9848489181",
"6": "testovacia akciovka",
"7": "0000-00-00 00:00:00",
"8": "2",
"DT_RowId": "row_2"
}
]
}
here in onclick I want to get data from expanded row
$('#dataTables-subjekt-childrow').on('click', 'td.details-control', function () {
var tr = $(this).closest('tr');
var row = table2.row( tr );
if ( row.child.isShown() ) {
// This row is already open - close it
row.child.hide();
tr.removeClass('shown');
}
else {
// Open this row
row.child( format(row.data()) ).show();
tr.addClass('shown');
}
} );
but when I add $subjektID = (table2.row(this).data(8));
I get just empty object
I am javascript newbie so pls somebody can point me to solution how to get in this "onclick" data from json related to row?
Answers
ok got it working finally
it looks that when working with data as objects from json, it doesnt like numbers there so I changed my json source to
and then just in part when row is expanded add