Answers

• PhilJones Posts: 10Questions: 2Answers: 0

  April 2016

  Bump.
• PhilJones Posts: 10Questions: 2Answers: 0

  April 2016

  Bump.
• PhilJones Posts: 10Questions: 2Answers: 0

  April 2016

  Bump.
• johnvndnbrk Posts: 8Questions: 1Answers: 1

  April 2016

  Well, if you are looking for the easiest way to do this you can use the Responsive extension and "push" the row off the grid, causing that row to be a child record. An example of this is: https://datatables.net/extensions/responsive/examples/column-control/auto.html. It is not really a child row, however, but it displays like one. You can see this in action when using Responsive and narrowing the browser window width.

  This is the easiest way I can think to do this and hopefully relevant to what you are looking for.

  Good luck,

  John
• allan Posts: 63,353Questions: 1Answers: 10,444 Site admin

  April 2016

  Hi Phil,

  Perhaps you can show us the code you tried for the child row please. If should basically be the same as the example you linked to. Have the data you want to display in a column that you make hidden (with columns.visible) and then use that information (which you get from row().data()) when you render the child row.

  Allan
• PhilJones Posts: 10Questions: 2Answers: 0

  April 2016

  @allan Sorry, tried following https://datatables.net/examples/api/row_details.html but got confused, as that code defines columns and such and mine doesn't, so I couldn't match up how I use it in my scenario. I'll try again today and post here.
• PhilJones Posts: 10Questions: 2Answers: 0

  April 2016 edited April 2016

  @allan OK, here is the code:

  At the moment I get no child row or anything.

      <style>
      td.details-control {
          background: url('http://next.datatables.net/examples/resources/details_open.png') no-repeat center center;
          cursor: pointer;
      }
      tr.shown td.details-control {
          background: url('http://next.datatables.net/examples/resources/details_close.png') no-repeat center center;
      }
      </style>
  
            <table class="table table-bordered" id="table">
              <thead>
                <tr>
                  <th>Col1</th>
                  <th>Col2</th>
                  <th>Col3</th>
                  <th>Col4</th>
                  <th>Col5</th>
                  <th>Col6</th>
                  <th>Col7</th>
                  <th>Col8</th>
                  <th>Col9</th>
                </tr>
              </thead>
              <tbody>
              </tbody>
            </table>
  
      <script type="text/javascript" charset="utf-8">
      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>Col9:</td>'+
                 '<td>'+d.[8]+'</td>'+
                 '</tr>'+
                 '</table>';
          }
  
      $(document).ready(function() {
          $('#table').dataTable( {
              "ajax": {
                "data": {
                    "id": "<?php echo $_GET['id']; ?>"
                },
                "url": "/server_scripts/order.php",
                "type": "POST"
                },
              "columnDefs": [
                  { "visible": false, "targets": 8 }
              ],
              "order": [[ 0, "desc" ]],
              "info": false,
              "ordering": false,
              "paging": false,
              "serverSide": true,
              "searching": false
          } );
      } );
      
      // Add event listener for opening and closing details
      $('#table tbody').on('click', 'td.details-control', function () {
          var tr = $(this).closest('tr');
          var row = table.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');
          }
      } );
      </script>
  
  
  

  I don't have names like in the child row example, the server side data is returned just values, example:

  {"draw":1,"data":[["1","4","LE04DBRD","6.8mm","18","4mm","377","700","18mmr"],["2","1","LE08LSAF","4mm","16","6.8mm","447","1825","18"]],"recordsFiltered":2,"recordsTotal":2}
  

  Note: I should have said, I want all child rows to be constantly viewable, hence I don't have a column for the icon to open and close.
• PhilJones Posts: 10Questions: 2Answers: 0

  April 2016

  @allan do you know what I'm doing wrong?
• allan Posts: 63,353Questions: 1Answers: 10,444 Site admin

  April 2016

  This: d.[8] looks like it would cause a Javascript syntax error. Are there no errors shown in your browser's console? I think it should simply be d[8] for your above data structure.

  Allan
• PhilJones Posts: 10Questions: 2Answers: 0

  May 2016

  @allan Sorry not getting anywhere here using the child row example page. Whenever I try use that code it just completely breaks everything and I can't work out what it is.

  Here is current code:

            <table class="table table-bordered" id="table">
              <thead>
                <tr>
                  <th>Column1</th>
                  <th>Column2</th>
                  <th>Column3</th>
                  <th>Column4</th>
                  <th>Column5</th>
                  <th>Column6</th>
                  <th>Column7</th>
                  <th>Column8</th>
                  <th>Column9</th>
                </tr>
              </thead>
              <tbody>
              </tbody>
            </table>
  
      $(document).ready(function() {
          $('#table').dataTable({
              "ajax": {
                  "data": {
                      "id": "<?php echo $_GET['id']; ?>"
                  },
                  "url": "/server_scripts/order.php",
                  "type": "POST"
              },
              "columnDefs": [{
                  "visible": false,
                  "targets": 8
              }],
              "order": [
                  [0, "desc"]
              ],
              "info": false,
              "ordering": false,
              "paging": false,
              "serverSide": true,
              "searching": false
          });
      });
  

  I want Column9 to be the child row, as you can see I've successfully hide that column from appearing but I don't know how to get it to show as an extra row?!
• PhilJones Posts: 10Questions: 2Answers: 0

  May 2016

  Even when I try and run this

  table.rows().every( function () {
      this
          .child(
              $(
                  '<tr>'+
                      '<td>'+rowIdx+'.1</td>'+
                      '<td>'+rowIdx+'.2</td>'+
                      '<td>'+rowIdx+'.3</td>'+
                      '<td>'+rowIdx+'.4</td>'+
                  '</tr>'
              )
          )
          .show();
  } );
  

  as a test, I don't get any child rows or any errors.
• allan Posts: 63,353Questions: 1Answers: 10,444 Site admin

  May 2016

  Can you give a link to the page show I can debug it please.

  Allan