Question

我有一个asp.net Web应用程序，可以选择提供有关自动化机器的伪实时数据。我正在使用带有ajax数据源的JQuery Datatables。我有一个间隔，每隔一段时间重新加载数据源（从数据库异步更新我的数据表），然后重绘表。

我也在使用表格的响应式插件，因此可以通过手机大小的设备轻松访问网络应用程序。我已经设置了它，以便它删除所有列但第一个（主）列，并将其他列添加到子（详细信息）记录中。这是我的应用程序中断和我的手机用户松散可用性的地方。这是因为每当表重绘详细记录时，快照都会关闭。因此，如果电话用户正在查看该表并扩展了记录的详细信息，则只要重新绘制该表，记录就会立即关闭。

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

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

持久化扩展细节Jquery数据表

1 个答案: