Question

我想知道是否有人可以帮我解决我遇到的问题。我正在使用Asp.net和JQuery UI 1.9.2。我的表单上有一个文本框和一个搜索按钮。单击该按钮时，服务器端I查询数据库并将所有结果存储在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;
}

这个Gridview位于一个div中，我用它来作为一个模式弹出窗口的JQuery Dialog。在将gridview的数据源与查询结果绑定之后，我这样做来创建模态：

CS：

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

JS：

function CreateMemberModal()
{
    $(document).ready(function ()
    {
        $("#modal").dialog(
        {
            modal: true,
            hide: "explode",
            width: 700,
            height: "auto",
            resizable: false,
            open: function (event, ui)
            {
                $("#gridMemberInfo").dataTable(
                {
                    "bJQueryUI": true,
                    "sPaginationType": "full_numbers",
                    "aaSorting": []
                });
            }
        })
    });
}

模式正确显示，并在第一次打开对话框时完美运行。但是，如果用户关闭对话框并执行不同的搜索，则会打开对话框，但gridview不会采用任何DataTable属性（在模式中显示为常规HTML表）。此外，modal div位于asp：UpdatePanel内部，因此在搜索期间页面不会重新加载。谁能看到我做错了什么？

Answer 1

关于Dan的评论，我删除了CreateMemberModal()函数中的$（document）.ready（）逻辑。我现在只在我的CS中调用它，当我需要通过这样做重新绑定我的gridview时：

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

然而，需要做的事情就像丹所指出的那样。我注意到如果我将GridView移到模态div之外，那么表格会显示更新的搜索结果。所以这让我觉得这是实际的JQuery Dialog而不是DataTables的问题。我发现我需要做的是在关闭时彻底销毁Dialog并将其从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");
}

所以当我关闭对话框时，我会彻底销毁它。然后，当我需要进行新的搜索时，我重新创建它，一切都像魅力一样！

带有DataTable的JQuery对话框（）

1 个答案: