Answers

• yu yen kan Posts: 65Questions: 31Answers: 0

  April 2017

  I can render sub table with following code

  renderer: function (api, rowIdx, columns) {
                          var data = $.map(columns, function (col, i) {
                              return col.hidden ?
                                      '<tr data-dt-row="' + col.rowIndex + '" data-dt-column="' + col.columnIndex + '">' +
                                      '<td>' + col.title + ':' + '</td> ' +
                                      '<td>' + col.data + '</td>' +
                                      '</tr>' :
                                      '';
                          }).join('');
  
                          var row = requestTable.row(rowIdx);
                          
  var table = "";
                          if (row !== undefined && row.data() !== undefined) {
                              table = RequestDetailDiv(row.data().id, data);//'<div class="sub_data_table"><table cellpadding="5" cellspacing="0" border="0" style="width:100%" id="table+ row.data().id + '">' +
                                     //'</table></div>';
  showRequestDetail(row);
                          }
  //                         +
  //                                    '<tr>' +
  //                                    '<td>' +
  //                                    '</td>' +
  //                                    '</tr>'
                          return table ? table : false;
                      }
  
  function showRequestDetail(row) {
              var id = row.data().id;
  
  $('#table+ id).DataTable({
                  dom: "Bfrtip",
                  rowId: "id",
                  data: row.data().request_detail
  });
  }
  

  but after I render sub table, the responsive effect gone and I get this error

  SCRIPT5007: Unable to get property 'node' of undefined or null reference
  dataTables.buttons.min.js (7,294)
  

  and the detail view is not longer work after 1st expand
• allan Posts: 63,552Questions: 1Answers: 10,477 Site admin

  April 2017

  The responsive-display event is triggered when the child row is altered. You could use that to initialise a Javascript control inside of it.

  Allan
• yu yen kan Posts: 65Questions: 31Answers: 0

  April 2017

  tried responsive-display event, unfortunately, when I tried to initialize the datatable in child view, the detail.render is trigger again and the output is replaced
• yu yen kan Posts: 65Questions: 31Answers: 0

  April 2017

  Details for row 0 shown is update, false
  Details for row 0 shown is update, true
  Details for row 0 hidden is update, false
  

  from the log of responsive-display event, when 1st render is received and I initialize the sub table by

   if (showHide && !update) {
                  showRequestDetail(row);
               }
  

  to avoid infinity loop, 2nd event is triggered after I initialize sub table
• allan Posts: 63,552Questions: 1Answers: 10,477 Site admin

  April 2017

  Just to confirm, are you saying that with the above it works for you?

  Allan
• yu yen kan Posts: 65Questions: 31Answers: 0

  April 2017

  sample3 is before show detail view,
  sample1 is after show detail view,
  sample2 is after show detail view and resized window

  sample3.png 9.8K

  sample1.png 25.5K

  sample2.png 18.7K
• yu yen kan Posts: 65Questions: 31Answers: 0

  April 2017

  work only on 1st click on detail view, after that it cannot be click anymore to show/hide detail view