Jquery Nested Data Table with Sort Feature

Question

I am trying to create Data table inside data table usign jquery. I have achieved creating it with html so far but I want Column sort which isnt possible with my code. Can any one please Guide me how Can I have Data Table inside Data table with Sorting Feature. I have attached Screen Shot for possible Out Come. Where the table in last column should be with Sorting.

I am providing link with Jsfiddle. Some sort of direction would be good. In current implementation I have create nested table with below code which dont give me sorting from Jquery Data table.

function createDataTable() {
    var tableHeader = '<thead class="thead-light"><tr><th>Age</th><th>Location</th><th>nationality</th></tr></thead>';
    var tableRows = '';
        var tableRow = '';
        var firstTd = '<td>32</td>';
        var secondTd = '<td>USA</td>';
        var thirdTd = '<td>American</td>';
  
  
        tableRow = '<tr id="1" name="1">'+tableRow+firstTd+secondTd+thirdTd+fourthTd+'</tr>';
        tableRows = tableRows+tableRow; 
  
  
        var tableRow = '';
        var firstTd = '<td>33</td>';
        var secondTd = '<td>UK</td>';
        var thirdTd = '<td>British</td>';
        tableRow = '<tr id="2" name="2">'+tableRow+firstTd+secondTd+thirdTd+fourthTd+'</tr>';
        tableRows = tableRows+tableRow;   
        return '<table class="table table-bordered" id="1" name="1">'+tableHeader+'<tbody>'+tableRows+'</tbody>'+'</table>';
}

This Returned Table is then assigned to last Col of data table with something like .

dtRow[8] = createDataTable();

IT gives something like this in Image.

Please Guide me how can i achieve Sorting on Nested Data table for last row.

JS Fiddle :

JS Fiddle Code

Answer 1

You can create a full DataTable inside each cell of the Examiner column, and then initialize all those nested DataTable instances to sort in whatever order you need.

You have not shown us how you source your data, so I will give a demo which uses my own test data as JavaScript-sourced data. But the techniques are the same, regardless of how the data is sourced (JavaScript, Ajax, etc.):

1. Build a string containing the full <table> HTML for each nested table.

2. Give each of these tables a class name. I will use class="childTable" in my demo.

3. After the main parent table has been initialized, then use the child table class name to mass-initialize every child table.

Here is a demo:

var dataSet = [
    {
      "name": "Tiger Nixon",
      "position": "System Architect",
      "details": [
        {
          "language": "Java",
          "level": "1 - advanced"
        },
        {
          "language": "C++",
          "level": "2 - intermediate"
        }
      ]
    },
    {
      "name": "Cedric Kelly",
      "position": "Javascript Developer",
      "details": [
        {
          "language": "JavaScript",
          "level": "1 - advanced"
        },
        {
          "language": "Python",
          "level": "3 - beginner"
        }
      ]      
    }
  ];
 
function formatChildTable ( data ) {

  var table_string =  '<table class="childTable display dataTable cell-border"><thead>' +
    '<tr>' +
      '<th>Language</th>' +
      '<th>Level</th>' +
    '</tr></thead><tbody>';
    
  
  data.forEach(function(row) {
    var row_string = '';
    row_string = row_string + 
      '<tr>' + 
        '<td>' + row.language + '</td>' +
        '<td>' + row.level + '</td>' +
      '</tr>';
    table_string = table_string + row_string;
  });

  table_string = table_string + '</tbody>' + '</table>';

  return table_string;
}

$(document).ready(function() {

var table = $('#example').DataTable( {
  data: dataSet,
  columns: [
    { 
      data: "name" 
    },
    { 
     data: "position" 
    },
    { 
      data: "details",
      render: function ( data, type, row, meta ) {
        return formatChildTable( data );
      }
    }
  ],
  initComplete: function(settings, json) {
    // mass-initialize every child table using the `childTable` class as the selector:
    $('.childTable').DataTable({
      dom: 't',
      order: [[1, 'desc']] // sort on the last row, descending order
    });
  }

} ); 




} );

<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Demo</title>
  <script src="https://code.jquery.com/jquery-3.5.1.js"></script>
  <script src="https://cdn.datatables.net/1.10.22/js/jquery.dataTables.js"></script>
  <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.22/css/jquery.dataTables.css">
  <link rel="stylesheet" type="text/css" href="https://datatables.net/media/css/site-examples.css">
</head>

<body>

<div style="margin: 20px;">

    <table id="example" class="display dataTable cell-border" style="width:100%">
        <thead>
            <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Details</th>
            </tr>
        </thead>
    </table>

</div>

</body>
</html>

The end result looks like this:

In my case I chose to sort the child tables using order: [[1, 'desc']].

I also used dom: 't' to hide all the other standard controls you get by default, so only the table itself is displayed.