Datatables Subrows

zgoforth

Hello, so for this project I am working on I am pulling in a lot of data to populate to my DataTable. To reduce the amount of similar items displayed, I want to create DataTable subrows with a drop down based on an item in my "Deliverables" Column. The example I want to base it off is the example table shown here.

I have the column Deliverables with two options, Meeting Minutes and MSR, I want to have only those two things populate to the table, then have a clickdown showing everything under what "Program" it is. Here is a picture of my current DataTable, and I will attach the code below.

---

---

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.js"></script>
<script src="https://momentjs.com/downloads/moment.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.15/css/jquery.dataTables.min.css" />
<div class ="container">
<table id="myTable" class="display" cellspacing="0" width="100%">
  <thead>
    <tr>
      <th>Program</th>
      <th>Deliverable</th>
      <th>To</th>
      <th>Date</th>
      <th>Approved</th>
      <th>Notes</th>
    </tr>
  </thead>
  <tfoot>
      <tr>
      <th>Program</th>
      <th>Deliverable</th>
      <th>To</th>
      <th>Date</th>
      <th>Approved</th>
      <th>Notes</th>
    </tr>
  </tfoot>
</table>
</div>
<style>
div.container {
    min-width: 980px;
    margin: 0 auto;
}
.header {
  padding: 10px;
  text-align: center;
}
body {
    font: 90%/1.45em "Helvetica Neue", HelveticaNeue, Verdana, Arial, Helvetica, sans-serif;
    margin: 0;
    padding: 0;
    color: #333;
    background-color: #fff;
}
</style>
<script>
function loadData() {
    var urls = ["url1, url2, url3"];
       
    for (i=0; i < urls.length; i++) {
      $.ajax({
        url: urls[i],
        'headers': { 'Accept': 'application/json;odata=nometadata' },
        success: function (data) {
          data = data;
          var table = $('#myTable').DataTable();
          table.rows.add( data.value ).draw();
        }
      }); 
    } // missing bracket
}
$(document).ready(function() {
    
  $('#myTable').DataTable( {
    "columns": [
      { "data": "Program" },
      { "data": "Deliverable" },
      { "data": "To" },
      { "data": "Date" },
      { "data": "Approved" },
      { "data": "Notes" }
    ]
  } );
    
 loadData();
    
} );
</script>

zgoforth

I guess a better term as opposed to subrows, I should have used "grouping"

kthorngren

The example you linked to is using the Responsive extension. I think what you are wanting is not responsive but something like this Child Rows Detail where you define the child rows.

There is also the RowGroup Extension.

Kevin

zgoforth

@kthorngren So I got the table to appear, which is always a good sign at first, but it will not populate it with any data

zgoforth

function loadData() { //Initializing the AJAX Request function to load in the external list data from different subsites
    //create an array of urls to run through the ajax request instead of having to do multiple AJAX Requests
    var urls = ["url1","url2","url3"];
       
    for (i=0; i < urls.length; i++) { //for loop to run through the AJAX until all URLs have been reached
      $.ajax({
        url: urls[i],
        'headers': { 'Accept': 'application/json;odata=nometadata' },
        success: function (data) { // success function which will then execute "GETTING" the data to post it to a object array (data.value)
          data = data;
          var table = $('#myTable').DataTable();
          table.rows.add( data.value ).draw();
        }
      }); 
    } // missing bracket
} 
function format ( data ) {
    // `d` is the original data object for the row
    return '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">'+
        '<tr>'+
            '<td>Program:</td>'+
            '<td>'+data.Program+'</td>'+
        '</tr>'+
        '<tr>'+
            '<td>Recipient:</td>'+
            '<td>'+data.To+'</td>'+
        '</tr>'+
        '<tr>'+
            '<td>Date:</td>'+
            '<td>'+data.Date+'</td>'+
        '</tr>'+
        '<tr>'+
            '<td>Approved:</td>'+
            '<td>'+data.Approved+'</td>'+
        '</tr>'+
        '<tr>'+
            '<td>Additional Notes:</td>'+
            '<td>'+data.Notes+'</td>'+
        '</tr>'+
    '</table>';
}
$(document).ready(function() {
    var table = $('#myTable').DataTable( {
        "columns": [
            {
                "className":      'details-control',
                "orderable":      false,
                "data":           null,
                "defaultContent": ''
            },
            { "data": "Deliverable" }
        ],
        "order": [[1, 'asc']]
    } );
     
    $('#myTable 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 {
            row.child( format(row.data()) ).show();
            tr.addClass('shown');
        }
    } );
} );

zgoforth

tangerine

I don't see where you're calling your loadData() function.

zgoforth

@tangerine -.- good call, I didn't even realize that

zgoforth

@tangerine I called it after this which is where it seems like it should go, and it says "No data available in the datatable.

$(document).ready(function() {
    var table = $('#myTable').DataTable( {
        "columns": [
            {
                "className":      'details-control',
                "orderable":      false,
                "data":           null,
                "defaultContent": ''
            },
            { "data": "Deliverable" }
        ],
        "order": [[1, 'asc']]
    } );
    loadData();

colin

We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin