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

bejbe01bejbe01 Posts: 10Questions: 4Answers: 0
edited June 2015 in Free community support

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

  • bejbe01bejbe01 Posts: 10Questions: 4Answers: 0

    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

                "text0": "testovacia firma1",
                "text1": "Bratislava III",
                "text2": "Bratislavský",
                "text3": "SRO",
                "text4": "Nová 19, Bratislava",
    

    and then just in part when row is expanded add

     $subjektID = row.data().text4;
    
This discussion has been closed.