我有一个asp.net Web应用程序,可以选择提供有关自动化机器的伪实时数据。我正在使用带有ajax数据源的JQuery Datatables。我有一个间隔,它每隔设定的时间重新加载数据源(这会从db异步更新我的数据表),然后重绘该表。
我还在表中使用了响应式插件,因此可以从手机大小的设备很好地访问Web应用程序。我已经对此进行了设置,以使其删除除第一(主)列以外的所有列,并向其他列添加子(详细)记录。这是我的应用中断,手机用户失去可用性的地方。这是因为每当表重绘详细记录时,快照都会关闭。因此,如果电话用户正在查看表并扩展了记录的详细信息,则记录将在重绘表后立即关闭。
我的解决方案是捕获打开的细节,然后在重画时重新打开细节。我相信我已经成功地捕获了细节,但是我发现尝试以编程方式扩展它的所有方法都没有用。
$(document).ready(function () {
var row;
var tr;
var table = $('#myDataTable').DataTable({
autoWidth: false,
processing: false,
stateSave: true,
sAjaxSource: '@Url.Action("GetDropData", "Drops")',
"columns":
[
{ "width": "10%" },
{ "width": "50%" },
{ "width": "40%" }
]
});
var timer = setInterval(function () {
table.ajax.reload(null, false);
}, 1000);
//flag is used to determine if last click expanded a detail
var flag = false;
//If table is clicked find closest 'tr'
table.on('click', 'tr', function () {
tr = $(this).closest('tr');
row = table.row(tr);
//was click a detail expansion
if (row.child.isShown()) {
flag = true;
}
})
// event fires after ajax call completes (reload and redraw)
$('#myDataTable').on('xhr.dt', function () {
if (flag) {
$(tr).addClass('row_selected');
}
});
});
如果您能说出为什么细节没有得到扩展或更好的解决方案,请告诉我。我确实有一个临时解决方案,只是在单击详细信息按钮时暂停了间隔,但这使我的电话用户表无法更新。
最佳答案
如果您使用的是Datatables 1.9和更早版本,请使用fnDrawCallback()
。
如果您使用的是Datatables 1.10+,请使用drawCallback
()。
这两个回调都在数据表初始化程序中,并且可以使用行详细信息打开代码。
$(document).ready( function() {
$('#example').dataTable( {
"fnDrawCallback": function( oSettings ) {
//open detail row here
}
} );
} );
关于javascript - 扩展细节Jquery Datatables的持久性,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/28766560/