受排序影响的数据表共享参数
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();
});
});
步骤:
- 加两个child仁
- 在任何列上先 child 排序
- 使用重新创建按钮重新创建第二个 child
- 第二个 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.
看到演示
我有一个 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();
});
});
步骤:
- 加两个child仁
- 在任何列上先 child 排序
- 使用重新创建按钮重新创建第二个 child
- 第二个 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.