在 jquery 数据表处理分页时显示对话框

Question

我正在使用 asp.net mvc 处理 jQuery 数据表，我有数千行可以使数据表在大约 3-5 秒内进行分页。

我想要的是显示一个对话框，显示该表当前正在处理分页。

我现在要做的是使用带有 ajax 的局部视图显示一个对话框。 但问题是在数据表完成工作后才显示对话框。有什么办法可以让数据表在显示对话框时继续分页，然后关闭对话框？

这是我正在做的一些sn-ps：

$("#runButton").click(function() {
    var url = '@Url.Action("Loading")';
    $.get(url, function (data) {
        //Start of Dialog
        $.Dialog({
            sysButtons: { btnClose: false },
            overlay: true,
            shadow: true,
            padding: 10,
            height: 75,
            width: 300,
            flat: true,
            onShow: function (_dialog) {
                $.Dialog.title("Test Dialog");
                $.Dialog.content(data);
                $.Metro.initAll();
            }
        });
    })

    showTable();
})

function showTable() {
    var table = $('#dataTable').DataTable({
            "deferRender": true,

            "columnDefs": [
                { "visible": false, "targets": 2 }
            ],
            "order": [[2, 'asc']],
            "drawCallback": function (settings) {
                var api = this.api();
                var rows = api.rows({ page: 'current' }).nodes();
                var last = null;

                api.column(2, { page: 'current' }).data().each(function (group, i) {
                    if (last !== group) {
                        $(rows).eq(i).before(
                            '<tr class="group"><td colspan="5" bgcolor="#C0C0C0">' + group + '</td></tr>'
                        );
                        last = group;
                    }
                });
            }
        });
}

--编辑--

我正在做一些故障排除，我尝试使用简单对话框并将表的初始化放在对话框函数中：

$("#runButton").click(function() {
    ("#dialog").dialog({
    open: function () {
        showTable();
    }
});

});

还是同样的问题，数据表在完成后仍然首先运行，这就是对话框出现的时间。我需要做什么才能让对话框首先出现，然后让数据表完成其工作并关闭对话框。请帮忙，谢谢！

Answer 1

1.显示主页面，在主页面中，有一个按钮（或其他），点击它会显示一个空对话框。
2.显示空对话框后，开始一个ajax请求加载列表。
3.在列表中，有一些到第 2 页、第 3 页的链接.....
4.单击页面链接时，将对话框清空，并开始一个ajax加载页面2（或3，或4....）
5.ajax加载后，放入dialog div
您可以将空对话框更改为加载图标
您可以使用 @Ajax.ActionLink(...) 轻松完成此操作
AjaxOptions 有一些属性 UpdateTargetId,OnBegin,OnSuccess...你可以使用这些来做更多的事情