Sorting DataTable within DataTable

Question

By clicking the "Create Child" button in the following jsfiddle, you will create a child row for the first row in the table. The content of this child row is another DataTable.

After the child is created, if you sort the child DataTable by one of its columns, you will see that the sorting arrows also change for the same column in the parent table:

http://jsfiddle.net/wthY9/2/

Does anyone know why this would be happening? Is this possibly a bug with DataTables?

Here's the corresponding code from the fiddle:

HTML

<table id="myTable">
    <thead>
        <tr>
            <th>Col 1</th>
            <th>Col 2</th>
            <th>Col 3</th>
            <th>Col 4</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Sam</td>
            <td>10</td>
            <td>Left</td>
            <td>Blue</td>
        </tr>
        <tr>
            <td>Mike</td>
            <td>8</td>
            <td>Right</td>
            <td>Red</td>
        </tr>
        <tr>
            <td>Joe</td>
            <td>3</td>
            <td>Left</td>
            <td>Blue</td>
        </tr>
    </tbody>
</table>

<script type="text/template" id="child_table">
    <table>
        <thead>
            <tr>
                <th>Col 1</th>
                <th>Col 2</th>
                <th>Col 3</th>
                <th>Col 4</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Jen</td>
                <td>100</td>
                <td>Left</td>
                <td>Pink</td>
            </tr>
            <tr>
                <td>Sal</td>
                <td>88</td>
                <td>Right</td>
                <td>Green</td>
            </tr>
        </tbody>
    </table>    
</script>

<button id="createChild">Create Child</button>

JS

$(document).ready(function(){
    var myDataTable = $('#myTable').DataTable({
        "order":[],
    });

    $('#createChild').click(function(e){
        e.preventDefault();
        var $table = $($('#child_table').html());
        $table.css('width','100%');
        $table.DataTable();
        myDataTable.row(0).child($table).show();
    });
});

Unknown Unknown · Accepted Answer · 2014-08-13T07:10:57

on clicking on the header to sort the child data table, you add a class ('sorting_asc', 'sorting_desc') both to the parent table and child table's column(x).

I would try and append a custom class for the child table and create some custom sorting according to that.

Sorting DataTable within DataTable

2 Answers