Answers

• allan Posts: 63,552Questions: 1Answers: 10,477 Site admin

  September 2015 Answer ✓

  I presume you are using the Select extension? If so, then no. It will intentionally find and disallow selection of elements which are not part of the host table.

  If you wanted to select items in the child row you would need to write some code for that.

  Allan
• jfincanon Posts: 2Questions: 1Answers: 0

  September 2015

  Ok. Thanks for the quick reply Allan. :)
• jLinux Posts: 981Questions: 73Answers: 75

  September 2015

  @allan - I have a feature on my web app where people can view the active sessions associated to their account, and the activity in the session. I use the Child Rows Example, except for the format function loads a table with a unique ID, which has its rows populated via AJAX, then a new DataTables instance is initiated for that table.

  I should be able to use the select extension for that right? The DataTables works perfectly find on the table in the child (Well, it did, something recently broke, or else id just try to add select: true to the DT child rows initiation.

  Heres the relevant code

  account = {
      details: function () {
          "use strict";
  
          var $sessions_table = $( '#my-sessions' );
          var $session_activity_dt;
  
          // Format child rows with session data
          function format_sessions ( data ) {
              console.log('format_sessions called: ', data);
  
              if( ! data){
                  return '<table cellpadding="5" cellspacing="0" border="0"  class="table session-data width-full display compact table-condensed p-t-3">'
                      + '<tr><td>No data!</td></tr></table>';
              }
  
              var table = '<table cellpadding="5" cellspacing="0" border="0" id="'+data[0].session_id+'" class="table session-data width-full display compact table-condensed p-t-3">' +
                  '<thead>' +
                  '<tr>' +
                  '<th>Timestamp</th>' +
                  '<th>Partition</th>' +
                  '<th>URI</th>' +
                  '<th>Response</th>' +
                  '<th>Req Type</th>' +
                  '</tr>'+
                  '</thead>' +
                  '<tbody>';
  
              $.each(data, function(i,v){
                  console.log('Processing Row # '+i+': ', v);
                  
                  var response_label;
  
                  if(v.http_response.match(/^5/)) {
                      response_label = 'danger';
                  } else if(v.http_response.match(/^4/)){
                      response_label = 'warning';
                  } else {
                      response_label = 'primary';
                  }
  
                  table += '<tr>' +
                  '<td>' + v.timestamp + '</td>' +
                  '<td>' + v.partition_id + '</td>' +
                  '<td>' + v.uri + '</td>' +
                  '<td><span class="label label-' + response_label + '">'+v.http_response+'</span></td>' +
                  '<td>' + v.request_type + '</td>' +
                  '</tr>';
              });
  
  
              table += '</tbody></table>';
  
              return table;
          }
  
          var $sessions_dt = $sessions_table.DataTable( {
              bInfo: false,
              searching: false,
              paging: false,
              columns: [
                  {
                      className:      'details-control',
                      orderable:      false,
                      data:           null,
                      defaultContent: ''
                  },
                  { data: 'terminate' },
                  { data: 'IP' },
                  { data: 'date' },
                  { data: 'uri' }
              ],
              order: []
          } );
  
          // Add event listener for opening and closing details
          $sessions_table.find('tbody').on('click', 'td.details-control', function () {
              console.log('Session Details Button Clicked');
              
              var tr = $(this).closest('tr');
              var row = $sessions_dt.row( tr );
  
              if ( row.child.isShown() ) {
                  // This row is already open - close it
                  row.child.hide();
                  tr.removeClass('shown');
              }
              else {
                  var $this = $( this );
                  var $row = $this.closest( 'tr' );
                  var session_id = $row.data( 'row-id' );
  
                  row.child( 'Loading...' ).show();
  
                  tr.addClass('shown');
  
                  $.ajax({
                      type: 'GET',
                      dataType: 'json',
                      url: '/REST/account/session_data/assoc_id/' + session_id + '/format/json',
                      success: function (response) {
                          console.log('Successful AJAX response: ', response);
                          //console.log('Response: ', response);
                          row.child( format_sessions(response.result) ).show();
  
                          $session_activity_dt = $('#'+session_id).DataTable({
                              searching: false,
                              bInfo: false,
                              scrollY: 300,
                              scrollCollapse: true,
                              paging: false,
                              order: []
                          });
                      },
                      error: function (xhr, ajaxOptions, thrownError) {
                          var result = $.parseJSON(xhr.responseText);
                          
                          console.log('Failed AJAX response: ', result);
  
                          template.alert( 'Error retrieving session ID: ', result.error, 'error', true);
                      }
                  });
              }
          } );
      }  
  };
  

  Also, as you can see, the session table is re-populated every time the row is expanded, so if you wanted to see new data, you would have to close it then expand it. Would you suggest that I use a different method for doing this?
• jLinux Posts: 981Questions: 73Answers: 75

  September 2015

  Nevermind, got it to work!

  http://d.pr/i/LAZl

  http://d.pr/i/B7P2

  @jfincanon is that anything like what you need?