Answers

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

  July 2017

  The example you link to uses a simple click event handler to open / close the child rows. Instead of doing that, just use rows().every() to iterate over the rows and open each in turn.

  Allan
• rozjan4650051 Posts: 4Questions: 1Answers: 0

  July 2017 edited July 2017

  I am new to DataTables, so excuse me if it is too general question. The thing is that I already have a for loop that loops through the JSON data that I get from ajax call. My code with for loop:-

  function displayFruits() { 
      $.ajax({
          type: "GET",
          headers: {
              'Accept': 'application/json',
              'Content-Type': 'application/json'
          },
          dataType: "json",
          url: "http://www.dummyexample.com",
  
          success: function(data) {            
                  var resultLen = Object.keys(data).length;
                  var tr;
              for (var i = 0; i < resultLen; i++) {
                  tr = $('<tr/>');
                  tr.append("<td>" + data[i].name + "</td>");
                  tr.append("<td>" + data[i].type + "</td>");
                  tr.append("<td>" + data[i].cost + "</td>");
                  tr.append("<td>" + data[i].season + "</td>");
                  tr.append("<td>" + data[i].vitaminContent + "</td>");
                  $('#tableId').append(tr);
              }
  
                  $('#tableId').DataTable();
          },
          error: function(xhr, ajaxOptions, thrownError) {
              // handle your fail response here
      }); //end of ajax
  }   // end of displayFruits() function 
  

  1. As I already have for loop, I am assuming I don't have to use row.every() API ?
  2. The JSON data I get from ajax call is dynamic and rather than using the method mentioned in the above link, I use $('#tableId').DataTable(); code to convert my html table to DataTable. $('#tableId').DataTable(); avoids having to use

  $(document).ready(function() {
      var table = $('#example').DataTable( {
          "ajax": "../ajax/data/objects.txt",
          "columns": [
              {
                  "className":      'details-control',
                  "orderable":      false,
                  "data":           null,
                  "defaultContent": ''
              },
              { "data": "name" },
              { "data": "position" },
              { "data": "office" },
              { "data": "salary" }
          ],
          "order": [[1, 'asc']]
      } );
  

  2.1 So my question is in order to have child row feature, do I need to configure

   "className":      'details-control',
                  "orderable":      false,
                  "data":           null,
                  "defaultContent": ''
  

  in my code ? If so, how could I achieve that ?
  3. Because the data is not static as mentioned in the example in link https://datatables.net/examples/api/row_details.html, how/where can I configure this function:

  function format ( d ) {
      // `d` is the original data object for the row
      return '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">'+
          '<tr>'+
              '<td>Full name:</td>'+
              '<td>'+d.name+'</td>'+
          '</tr>'+
          '<tr>'+
              '<td>Extension number:</td>'+
              '<td>'+d.extn+'</td>'+
          '</tr>'+
          '<tr>'+
              '<td>Extra info:</td>'+
              '<td>And any further details here (images etc)...</td>'+
          '</tr>'+
      '</table>';
  }
  

  Thank you.

  Edited by Allan - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.
• allan Posts: 63,552Questions: 1Answers: 10,477 Site admin

  July 2017

  As I already have for loop, I am assuming I don't have to use row.every() API ?

  Yes you would because DataTables cannot read child rows from the DOM. You need to create them using the DataTables API.

  So my question is in order to have child row feature, do I need to configure [...] in my code?

  No. That column is used in the demo to act as a click handler for row().child(). You need to activate that function for every row in the DataTable, which can be done using rows().every() after the table has been created.

  Because the data is not static as mentioned in the example in link https://datatables.net/examples/api/row_details.html, how/where can I configure this function:

  I don't really understand the question I'm afraid. Its a function that is entirely under your control. You'd modify it to output what you need in the child row.

  Allan
• rozjan4650051 Posts: 4Questions: 1Answers: 0

  July 2017 edited July 2017

  Thank you very much. I was able to achieve what I wanted by adding following code which is demonstrated in https://datatables.net/reference/api/rows%28%29.every%28%29 :

  var table = $('#tableId').DataTable();
   
              table.rows().every( function ( rowIdx, tableLoop, rowLoop ) {
                  this
                      .child(
                          $(
                              '<tr>'+
                                 '<td colspan="18">'+rowIdx+'.1</td>'+
                              '</tr>'+
                              '<tr>'+
                                  '<td colspan="18">'+rowIdx+'.1</td>'+
                              '</tr>'
                          )
                      )
                      .show();
              } );
  

  However the problem is that I want the child rows to autospan, rather than me having to hard code colspan="18". How can I autospan child rows as shown in the attached screenshot? The screenshot was taken from https://datatables.net/examples/api/row_details.html.

  DataTable1.PNG 10K
• allan Posts: 63,552Questions: 1Answers: 10,477 Site admin

  July 2017

  I'd forgotten that example was there - sorry!

  To have it auto span, you'd need to just give it something like:

              var table = $('#tableId').DataTable();
    
              table.rows().every( function ( rowIdx, tableLoop, rowLoop ) {
                  this
                      .child( "My row index: "+rowIdx )
                      .show();
              } );
  

  i.e. give it a string, not a tr element.

  Allan
• rozjan4650051 Posts: 4Questions: 1Answers: 0

  July 2017

  Thank you very much. It worked for one child row. How can we add multiple child rows ?
• allan Posts: 63,552Questions: 1Answers: 10,477 Site admin

  July 2017

  It looks like there might be a bug there - the jQuery addition should actually work there.

  I'll try to make some time to make a test case and see what is going wrong.

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

  August 2017

  I've finally managed to get around to looking into this - sorry!

  The problem is that Responsive is being used to hide the columns. If column().visible() were being used, then it would update the colspan no problem. But that isn't the case here - Responsive implements its own column hiding that DataTables core isn't aware of - so it can't update the child rows.

  Equally, since the child rows have been added externally, Responsive can't update them either since it knows nothing about them. But it does trigger responsive-resize so you know can know the columns have changed and update the colspan attribute at that time.

  Allan