我有一个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/

10-13 00:33