javascript - Jquery Datatables 扩展细节的持久性

Question

我有一个 ASP.NET Web 应用程序，可以选择提供有关自动化机器的伪实时数据。我正在将 JQuery 数据表与 ajax 数据源一起使用。我有一个间隔，每隔设定的时间重新加载数据源(从数据库异步更新我的数据表)，然后重新绘制表。

我还在表格中使用响应式插件，因此可以从手机大小的设备很好地访问网络应用程序。我已经进行了设置，以便它删除除第一(主)列之外的所有列，并将其他列添加为子(详细)记录。这就是我的应用程序崩溃和我的手机用户失去可用性的地方。这是因为每当表重绘详细记录时就会突然关闭。因此，如果电话用户正在查看表格并展开了记录的详细信息，则表格重新绘制后，记录将立即关闭。

我的解决方案是捕获打开的细节，然后在重绘时重新打开细节。我相信我已经成功捕获了细节，但我发现尝试以编程方式扩展它的所有内容都不起作用。

$(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');
            }
        });
    });

如果您能说出为什么详细信息未扩展或更好的解决方案，请告诉我。我确实有一个临时解决方案，只需在单击详细信息按钮时暂停间隔，但这会使我的手机用户表无法更新。

Answer 1

如果您使用的是 Datatables 1.9 及更早版本，请使用 fnDrawCallback() 。

如果您使用的是 Datatables 1.10+，请使用 drawCallback() 。

这两个回调都进入数据表初始值设定项，并且可以获取行详细信息打开代码。

$(document).ready( function() {
  $('#example').dataTable( {
    "fnDrawCallback": function( oSettings ) {
       //open detail row here
    }
  } );
} );