带有DataTable（）的JQuery对话框

我想知道是否有人能帮我解决一个问题。我正在使用Asp.net和jQueryUI1.9.2。我的表格上有一个文本框和一个用于搜索的按钮。单击按钮时，服务器端我查询数据库并将所有结果存储在Gridview中。为了使DataTable与Asp.Net gridview一起工作，我在CS中执行以下操作：

protected override void OnPreRender(EventArgs e)
{
    base.OnPreRender(e);

    // No point to change settings if there isn't any rows
    if (this.gridMemberInfo.Rows.Count <= 0)
        return;

    // Change table so there is a THEAD
    this.gridMemberInfo.HeaderRow.TableSection = TableRowSection.TableHeader;

    if(this.gridMemberInfo.ShowFooter)
        this.gridMemberInfo.FooterRow.TableSection = TableRowSection.TableFooter;
}

JS:

---

第一次打开对话框时，模态显示正确且工作正常。但是，如果用户关闭对话框并执行不同的搜索，则对话框将打开，但gridview不接受任何DataTable属性（在模式中显示为常规HTML表）。此外，modal div位于asp:UpdatePanel中，因此在搜索过程中不会重新加载页面。有人知道我做错了什么吗？

在Dan的评论之后，我删除了

CreateMemberModal（）

函数中的$（document）.ready（）逻辑。我现在只在需要通过以下操作重新绑定gridview时在CS中调用它：

ScriptManager.RegisterStartupScript(this, this.GetType(), "MemberModal", "CreateMemberModal();", true);

然而，需要像Dan指出的那样做额外的事情。我注意到，如果我将GridView移到modal div之外，那么该表将显示更新的搜索结果。所以这让我觉得这是实际JQuery对话框的问题，而不是DataTables的问题。我发现我需要做的是在关闭时完全销毁对话框，并将其从DOM中删除。现在我的

CreateMemberModal（）

函数如下所示：

function CreateMemberModal()
{
    $("#modal").dialog(
    {
        modal: true,
        hide: "explode",
        width: 700,
        height: "auto",
        resizable: false,
        autoOpen: false,
        close: function (event, ui)
        {
            $(this).dialog("destroy").remove();
        },
        open: function (event, ui)
        {
            if (!isDataTable($("#modal table")[0]))
            {
                $("#modal table").dataTable(
                {
                    "bJQueryUI": true,
                    "sPaginationType": "full_numbers",
                    "aaSorting": []
                });
            }
        }
    });

    $("#modal").dialog("open");
}

---

因此，当我关闭对话框时，我会完全破坏它。然后，当我需要做一个新的搜索，我重新创建它，一切工作就像一个魅力

updatepanel将在每次更新时重新绘制内容，因此$（document）.ready将仅处理第一个实例-它在页面加载时激发。您可以将该代码功能化，并在更新面板时调用它。不发布作为答案，因为我认为这只会部分解决你的问题

ScriptManager.RegisterStartupScript(this, this.GetType(), "MemberModal", "CreateMemberModal();", true);

function CreateMemberModal()
{
    $("#modal").dialog(
    {
        modal: true,
        hide: "explode",
        width: 700,
        height: "auto",
        resizable: false,
        autoOpen: false,
        close: function (event, ui)
        {
            $(this).dialog("destroy").remove();
        },
        open: function (event, ui)
        {
            if (!isDataTable($("#modal table")[0]))
            {
                $("#modal table").dataTable(
                {
                    "bJQueryUI": true,
                    "sPaginationType": "full_numbers",
                    "aaSorting": []
                });
            }
        }
    });

    $("#modal").dialog("open");
}