Datatables shared parameters affected by sorting

Question

I have a DataTable that can have N number of children DataTable(s) that can be added/removed/recreated at any time. I would like the children to share initialization parameters but it seems that DataTables affect the original data structure.

When adding two children and sorting the first one, the second child will inherit the sorting when recreated. I have created a fiddle here: http://jsfiddle.net/wthY9/44/

var myDataTable;
var index = 0;
var parentParams = {
    "order":[],
    "columns":[
        {"name":"Col 1"},
        {"name":"Col 2"},
        {"name":"Col 3"},
        {"name":"Col 4"},
    ],
};
var childParams = {
    "columns":[
        {"name":"Col 1"},
        {"name":"Col 2"},
        {"name":"Col 3"},
    ],
        "order":[],
};

$(document).ready(function(){
    myDataTable = $('#myTable').DataTable(parentParams);

    $('#createChild').click(function(e){
        e.preventDefault();
        if(typeof myDataTable.row(index).child() == "undefined"){
            var $table = $($('#child_table').html());
            $table.css('width','100%');
            var newChildParams = $.extend({}, childParams);
            var childTable = $table.DataTable(newChildParams);
            myDataTable.row(index).child(
                childTable.table().container()
            );
        }
        myDataTable.row(index).child.show();
        index++;
    });

-    $('#recreateChild').click(function(e){
        e.preventDefault();
        var lastIndex = index - 1;

        var $table = $($('#child_table').html());
        $table.css('width','100%');
        var childTable = $table.DataTable(childParams);
        myDataTable.row(lastIndex).child(
            childTable.table().container()
        );

        myDataTable.row(lastIndex).child.show();
    });

    $('#hideChild').click(function(e){
        myDataTable.row(--index).child.hide();
    });
});

Steps:

1. Add two children
2. Sort first child on any column
3. Recreate the second child with the recreate button
4. Second child have inherited the ordering (debugging shows that the default childParameters now have ordering set instead of being an empty Array).

How can I recreate children and keep the sort order for the child being recreated?

Edit: Since there has been no answer nor comment I have double posted this question to the DataTables forum.

Answer 1

var newChildParams = $.extend({}, childParams); is shallow copy here, which means newChildParams only point to childParams's address. If you change the variable in newChildParams, childParams will update too.

The solution is use deep copy var newObject = jQuery.extend(true, {}, oldObject);. It will copy the object to another memory address. You can see the graph for more details.

So I edited deep copy to #createChild and #recreateChild in your code, you can see demo at jsfiddle.