Cannot get Child Rows to work.

plangan

I have followed the tutorial on adding Child Rows to a parent row. The only difference to the tutorial is that I am using a web service as the data source (works fine). The final data column feedback may contain a lot of data. Hence I have added this column into a child row. I cannot get this to work.

I do not have a published web-site to visually show the issue.
__
The data (except the feedback column) is shown on the web-page. The folder icon is closed, but when I click it nothing happens - to me this implies that the event listener has not been invoked or is in error.

I suspect the answer is very simple but I cannot see it. Please point me in the right direction.

HTML

         <table id="docsTbl" class="display" width="100%"  cellspacing="0"> 
            <thead>
                <tr>
                   <th></th>
                   <th >ECRF</th>
                   <th>seq</th>
                   <th>Date</th>
                   <th>Negative Comments</th>
                   <th>Inform Nurse</th>
                </tr>
            </thead>
        </table>

JavaScript

   function format(data) {
       return '<table cellpadding="5" cellspacing="0" boorder="0" style="padding-left:50px;">' +
           '<tr>' +
              '<td>File Location:</td>' +
              '<td>' + data.feed_feedback + '</td>' +
           '</tr>' +
        '</table>';
   }


   $(document).ready(function () {
       $.ajax({
           url: '/services/feedbackWS.asmx/rtnFeedback',
           method: 'post',
           dataType: 'json',
           success: function (myData) {
               var table = $('#docsTbl').dataTable({
                   data: myData,
                   columns: [
                             {
                                 'className':'details-control',
                                 'orderable':false,
                                 'data':null,
                                 'defaultContent':''
                             },
                             { 'data': 'feed_ecrfNO' },
                             { 'data': 'feed_seq' },
                             { 'data': 'feed_date' },
                             { 'data': 'feed_negativeComments' },
                             { 'data': 'feed_sendToNurse' },
                   ]
               });

           }
       })
   });

   // Add event listener for opening and closing details
   $('#docsTbl tbody').on('click', 'td.details-control', function () {
       var tr = $(this).closest('tr');
       var row = table.row(tr);
       //var row = $('#docsTbl').DataTable().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');
       }
   });

CSS

td.details-control {
background: url('/images/folder_closed.png') no-repeat center center;
cursor: pointer;
}
tr.shown td.details-control {
background: url('/images/folder.png') no-repeat center center;
}

JSON returned from the web-service

[{"feed_ecrfNO":"R2BGH0002","feed_seq":2,"feed_date":"","feed_negativeComments":true,"feed_sendToNurse":false,"feed_updated":false,"feed_feedback":"ghjghjgjhghjghjg"}]

kthorngren

You may need to move your event listener inside the document ready function. Or maybe even put it inside initComplete to initialize it after Datatables is built.

Additionally if you are using a recent version of Datatables you should change:

var table = $('#docsTbl').dataTable(

to:

var table = $('#docsTbl').DataTable(

Notice the capital D in DataTable. See the first FAQ here:
https://datatables.net/faqs/index#Most-common-FAQs

Kevin

plangan

Thanks Kevin for the observation, made the change, data is still displayed but the child row still does not work (i.e. the folder is still closed - the child row is not displayed).

kthorngren

Not sure what change you made. I built a test case with your example:
http://live.datatables.net/zexahase/1/edit

I removed the ajax call and assigned myData with your example JSON data. I moved the event listener inside document ready and changed to upper case D. The test case works. If you still have issues then please update the test case to reflect your config or provide a link t your code showing the issue.

Kevin

plangan

Thanks Kevin. From your example I tracked the problem down to the use of the Ajax to get the JSON string. When I put your code onto my page (i.e. setting the myData string to the JSON string) the Child Rows worked.

In my original example the call to the WebService 'rtnFeedback' must be OK (because data is retrieved and displayed on the page). - but the the Child Rows did not work.

I have modified my code to put the listener inside the 'success' function (below). This time the Child Rows did work.

   $(document).ready(function () {
       $.ajax({
           url: '/services/feedback.asmx/rtnFeedback',
           method: 'post',
           dataType: 'json',
           success: function (myData) {
               var table = $('#docsTbl').DataTable({
                   data: myData,
                   columns: [
                             {
                                 'className':'details-control',
                                 'orderable':false,
                                 'data':null,
                                 'defaultContent':''
                             },
                             { 'data': 'feed_ecrfNO' },
                             { 'data': 'feed_seq' },
                             { 'data': 'feed_date' },
                             { 'data': 'feed_negativeComments' },
                             { 'data': 'feed_sendToNurse' },
                   ]
               });


               $("#docsTbl tbody td.details-control").click(function () {

                   // Add event listener for opening and closing details
                   //$('#docsTbl tbody').on('click', 'td.details-control', function () {
                   var tr = $(this).closest('tr');
                   var row = table.row(tr);
                   //var row = $('#docsTbl').DataTable().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');
                   }
               });

           }
       })

Whilst this works for now - I know it is not right I need to look into the AJAX call in more detail.

Again thanks Kevin