扩展细节的持久性 Jquery 数据表

Question

我有一个 asp.net 网络应用程序，可以选择提供有关自动化机器的伪实时数据。我将 JQuery Datatable 与 ajax 数据源一起使用。我有一个间隔，每隔设定的时间重新加载数据源（从数据库异步更新我的数据table），然后重绘table。

我还在为 table 使用响应式插件，因此可以从 phone 大小的设备很好地访问 Web 应用程序。我已将其设置为删除除第一个（主要）列以外的所有列，并将其他列添加为子（详细信息）记录。这是我的应用程序中断和我的 phone 用户失去可用性的地方。这是因为每当 table 重绘详细记录时就会关闭。因此，如果 phone 用户正在查看 table 并扩展了记录的详细信息，则一旦重绘 table，记录将立即关闭。

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

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

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

Answer 1

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

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

这两个回调都在您的数据表初始化程序中，并且可以获取您的行详细信息打开代码。

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

扩展细节的持久性 Jquery 数据表

Persistance of expanded detail Jquery Datatables

javascript

asp.net-mvc

jquery

datatables

jquery-datatables