Show / hide child rows in a Datatable

priybha

Want to show/hide child rows in a datatble with complex header and data coming from json(java rest api), but its not working for my table.
The data are getting populated in the table but on clicking the rows which is eventually getting triggered but not opening the child rows.

$(document).ready(function() { 
               var exampletable = $('#example')
                    .DataTable(
                            {
                                "responsive" : true,
                                "ajax": {
                                    type: "GET",
                                    dataType: "json",
                                    contentType: "application/json",
                                    url:"/MatchMergeAPI/getQuickViewEvents"
                                    }
                                    },
                                "aoColumns" : [
                                        {
                                            "sClass":      "details-control",
                                            "mData":           null,
                                            "defaultContent": ""
                                           
                                        },
                                        {
                                          "defaultContent" : "",
                                            "mData" : "eventDate"
                                        },
                                        {
                                            "defaultContent" : "",
                                            "mData" : "eventId",
                                            "render" : function(
                                                    val,
                                                    type,
                                                    full) {
                                               return '<td id=event>'
                                                        + val
                                                        + '</td>';
                                            }

                                        },
                                        {
                                            "mData" : "ecid_1.ecid"
                                        },
                                        {
                                            "mData" : "ecid_1.name"
                                        },
                                        {
                                            "mData" : "ecid_1.address"
                                        },
                                        {
                                            "mData" : "ecid_2.ecid"
                                        },
                                        {
                                            "mData" : "ecid_2.name"
                                        },
                                        {
                                            "mData" : "ecid_2.address"
                                        },
                                        {
                                            "mData" : "action",
                                            "defaultContent" : "",
                                            "render" : function(
                                                    val,
                                                    type,
                                                    full) {
                                                var event = full['eventId'];
                                                var actionComments = full['actionComments'];
                                                var ecid1 = full['ecid_1']['ecid'];
                                                var ecid2 = full['ecid_2']['ecid'];
                                                //data[0].eventId
                                                // alert(val+"  :: "+full['ecid_1']['ecid']);
                                                if (val == ""
                                                        || val == null) {
                                                    return '<div class="control-group"><label class="control control--radio">Approve<input type="radio" name="radio"  /><div class="control__indicator"></div></label><br/><label class="control control--radio">Reject<input type="radio" name="radio" /><div class="control__indicator"></div></label></div>';
} else {
                                                    return val;
                                                }
                                                 }
                                        },
                                        {
                                            "defaultContent" : ""
                                        },
                                        {
                                             "defaultContent" : "",
                                            "render" : function(
                                                    val,
                                                    type,
                                                    full) {
                                                var event = full['eventId'];
                                                if (full['action'] == ""
                                                        || full['action'] == null) {
                                                   
                                                    return '<textarea  id="comment'+event+'" placeholder="Enter your Comments" type="text" name="comment" ></textarea>';
                                                } else {
                                                    var comment = "";
                                                    if (full['actionComments'] != null) {
                                                        comment = full['actionComments'];
                                                    }
                                                    return '<textarea readonly  id="comment" name="comment">'
                                                            + comment
                                                            + '</textarea>';
                                                }
                                               
                                            }
                                        },
                                        {
                                            "defaultContent" : ""
                                        },
                                        {"defaultContent" : "",
}
                                        } ], "order": [[1, 'asc']]
                            });
                    // Add event listener for opening and closing details
                     $('#example tbody').click('td.details-control', function () {
                      var tr = $(this).closest('tr');
                       var tablerow = exampletable.row(tr);
                        if (tablerow.child.isShown()) {
                            // This row is already open - close it
                            tablerow.child.hide();
                            tr.removeClass('shown'); 
                        }
                        else {
                             // Open this row
                            tablerow.child(showEventDetails()).show();
                            tr.addClass('shown');
                           }
                        } );
                });

            function showEventDetails()
{
    return '<label>Hello there</label>';
    }

HTML

<table style="float: left;" id="example" class="display"
                cellspacing="0" width="100%">
                <thead style="font-size: 13px; font-family: 'Arial';">
                    <tr>
                        <th width="10%" rowspan=2></th>
                        <th width="10%" rowspan=2>Event Date(Date & Time - EST)</th>
                        <th width="6%" rowspan=2>Event Id</th>
                        <th width="20%" colspan=3>Retiree</th>
                        <th width="20%" colspan=3>Survivor</th>
                        <th width="10%" rowspan=2>Action</th>
                        <th width="10%" rowspan=2>Action Date(Date & Time - EST)</th>
                        <th width="14%" rowspan=2>Action Comments</th>
                        <th width="10%" rowspan=2>Action Taken By</th>
                        <th width="10%" rowspan=2>Details</th>
                    </tr>
                    <tr>
                        <th width="6%">Ecid</th>
                        <th width="6%">Name</th>
                        <th width="8%">Address</th>
                        <th width="6%">Ecid</th>
                        <th width="6%">Name</th>
                        <th width="8%">Address</th>
                    </tr>
                </thead>

            </table>

JSON data (repetitive)-

[{"eventId":"E570","ecid_1":{"ecid":"O571","name":"Saira Geller","address":"Bedford Lane New Jersey,USA 112345"},"ecid_2":{"ecid":"O571","name":"Saira Geller","address":"Bedford Lane New Jersey,USA 112345"},"eventDate":"24/05/2017","action":"","actionDate":null,"actionComments":null}]

Its not opening the child row after clicking the any row in the table

Rob Brun

Hi priybha, it looks like you are using bascically the same pattern that I used when I built one of these with just a couple variances. I did not have two table rows in the header. and I called the click event on tbody tr. Here is the pattern I used.

 $('#parentTable tbody tr > td.details-control').on('click', function () {
              var sdata = $(this).closest('tr').find('td:eq(1)').text();
                        
              var tr = $(this).parents('tr');
              var row = table.row(tr);

              if (row.child.isShown()) {

                 row.child.hide();
                 tr.removeClass('shown');

               } else {
                  if (table.row('.shown').length) {
                  $('td.details-control', table.row('.shown').node()).click();
                                 
                   }
                              
                  getDeposits1(sdata);
                  tr.addClass('shown');
                  row.child(format()).show();
                              
                   }
     });

The format function was the child table being built like

function format() {
        return '<table id="childTable" class="dataTable cell-border" style="width: 100%">' +
            '<thead>' +
            '<tr>' +
            '<th></th>' +
            '<th>Sales Person</th>' +
            '<th>Invoice Total</th>' +
            '<th>Deposits</th>' +
            '<th>Percent Paid</th>' +
            '<th>Remaining Balance</th>' +
            '</tr>' +
          '</thead>' +
            '<tfoot>' +
            '<tr>' +
            '<th></th>' +
           '<th>Totals:</th>' +
            '<th>Invoice Total</th>' +
            '<th>Deposits</th>' +
            '<th>Percent Paid</th>' +
            '<th>Remaining Balance</th>' +
            '</tr>' +
            '</tfoot>' +
            '</table>';

   }

I hope that this helps.

Shay