Collapsible/Expanding rows passing row-contents onclick

tomzn

Hi All,

I am trying to implement a datatable with expandible and collapsible rows similar to the code here :

```https://datatables.net/examples/api/row_details.html

I have gotten the code to expand and collapse the rows working but I'm experiencing difficulty in passing the values of the expanded row to my function when the details.control icon is clicked. eg. Upon clicking the expand icon(details-control) I'm trying to expand the row and populate it with data obtained via an ajax request dependent on some of the parent rows data. So some of the parent rows data needs to be passed to my ajax call. How do I obtain said rows data. My code is as follows below :

 $('#myTable').on('click', 'td.details-control', function () {
        var tr = $(this).closest('tr');
        var row = oTable.row(tr);
     // need to get row data here somehow
        var rowId = ?????

        if (row.child.isShown()) {
            // This row is already open - close it
            row.child.hide();
            tr.removeClass('shown');
        } else {
            // Open this row
            format(row.child,rowid);
            tr.addClass('shown');
        }
    });


    function format(callback, id) {
        $.ajax({
            url: "@Url.Action("foo", "bar")/"+ id,
            dataType: "json",
            complete: function (response) {
                var data = JSON.parse(response.responseText);
                var thead = '', tbody = '';
                for (var key in data[0]) {
                    //thead += '<th>' + key + '</th>';
                }

                $.each(data, function (i, d) {
                    for (var x = 0; x < d.length ; x++)
                    {
                        tbody += '<tr><td style="width:290px">' + d[x].Description + '</td><td style="width:210px">' + d[x].BalanceBroughtForward + '</td><td style="width:100px">' + d[x].Payments + '</td><td style="width:100px">' +
                      '</td></tr>';

                    }
                });
                callback($('<table>' + thead + tbody + '</table>')).show();
            },
            error: function () {
                $('#output').html('Bummer: there was an error!');
            }
        });

tomzn

After reading through the datatables api documentation and by trial and error I managed to get this working by using the following :

  $('#myTable').on('click', 'td.details-control', function () {
    var tr = $(this).closest('tr');
    var row = oTable.row(tr);
    var rowdata = (oTable.row(tr).data());
    if (row.child.isShown()) {
        // This row is already open - close it
        row.child.hide();
        tr.removeClass('shown');
    } else {
        console.log( oTable.row(tr).data());
        // Open this row
        format(row.child, oTable.row(tr).data());
        tr.addClass('shown');
    }
});

Any better, more elegant solutions are welcome. Cheers.

allan

need to get row data here somehow

row().data() would be the way to get the row data.

Good to hear you got it working.

Allan