Nested Data table with Sorting feature without Onclick

jordan_josh3184

Link to test case: https://jsfiddle.net/jordan_josh3184/nrb5h2d3/66/
Description of problem:
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>';
}

Table from Above function I am assigning to last column of data table.
dtRow[8] = createDataTable();

current Implementation Give out out like below. I need sorting on all Column of Child table.

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

rf1234

To be honest I didn't see the data table inside the other one in your jsfiddle. But that might be my fault

Your above function does not declare a data table. Hence it cannot have the sorting functionality of a real data table. I would change that.Then it should work.

I have a similar use case: On button click of a parent data table a modal opens showing a child data table that is linked with the parent data table by foreign key. Works like a charm including sorting.

This is the function I call on button click. I declare the child data table as a global variable before. That makes a lot of things easier.

var contractFiltrTable = {};

var showContractFiltrTable = function() {
    
    if ( $.fn.DataTable.isDataTable( '#tblContractFiltr' ) ) {
        ajaxReloadTbls([contractFiltrTable]);
        return;
    }

    contractFiltrTable = $('#tblContractFiltr').DataTable({
        dom: "Bti",
        fixedHeader: false,
        paging: false,
        retrieve: true,
        ajax: {
            url: 'actions.php?action=tblContractFiltr'
        },
        columns: [
            {  data: "filtr_name" },
            {   data: "filtr_field_type",
                render: function (data, type, row) {
                    return $.grep(fieldTypeOptions, function(obj){return obj.value == data;})[0].label;
                }
            },
            {  data: "contract_has_filtr.value"  }
        ],
        columnDefs: [
            {  targets: "contractFiltrs", className: "contractFiltrsInline" },
            {  targets: "fieldType", className: "ft" }
        ],
        order: [[0, 'asc'], [1, 'asc']],
    });
}

kthorngren

I'm not seeing your child row attempt in the test case. You will want to initialize the table in the child row as a Datatable to implement sorting, etc. This blog shows how to create child rows that are Datatables. You can ignore the Editor code.

Kevin

rf1234

Kevin's blog example is great. The lines I marked in yellow are missing in your code:

jordan_josh3184

Hello All,
Thank you I was able to implement what i require.
For reference this is the JS Fiddle.

https://jsfiddle.net/jordan_josh3184/nrb5h2d3/