受排序影响的数据表共享参数

Datatables shared parameters affected by sorting

我有一个 DataTable 可以有 N 个 children DataTable(s) 可以随时 added/removed/recreated。我希望 children 共享初始化参数,但似乎 DataTables 会影响原始数据结构。

当添加两个 children 并对第一个进行排序时,第二个 child 将在重新创建时继承排序。我在这里创建了一个 fiddle: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();
    });
});

步骤:

  1. 加两个child仁
  2. 在任何列上先 child 排序
  3. 使用重新创建按钮重新创建第二个 child
  4. 第二个 child 继承了顺序(调试显示默认 child 参数现在有顺序集,而不是一个空数组)。

如何重新创建 children 并保持重新创建的 child 的排序顺序?

编辑:由于没有答案或评论,我已将此问题双重发布到 DataTables forum

var newChildParams = $.extend({}, childParams);这里是浅拷贝,也就是说newChildParams只指向childParams的地址。如果您更改 newChildParams 中的变量,childParams 也会更新。

解决方案是使用深拷贝var newObject = jQuery.extend(true, {}, oldObject);。它将对象复制到另一个内存地址。您可以查看the graph了解更多详情。

所以我在你的代码中编辑了深拷贝到 #createChild#recreateChild,你可以在 jsfiddle.

看到演示