带有 DataTable() 的 JQuery 对话框答案

【问题标题】：JQuery Dialog with DataTable()带有 DataTable() 的 JQuery 对话框
【发布时间】：2013-08-23 20:03:09
【问题描述】：

我想知道是否有人可以帮助我解决我遇到的问题。我正在使用 Asp.net 和 JQuery UI 1.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;
}

这个 Gridview 位于一个 div 中，我将它用于 JQuery 对话框，以充当模式弹出窗口。在将 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 表）。此外，模态 div 位于 asp:UpdatePanel 内，因此在搜索期间不会重新加载页面。谁能看到我做错了什么？

【问题讨论】：

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

标签： jquery asp.net jquery-ui datatable updatepanel

【解决方案1】：

离开 Dan 的评论，我删除了 CreateMemberModal() 函数中的 $(document).ready() 逻辑。我现在只在我需要通过这样做重新绑定我的网格视图时在我的 CS 中调用它：

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

但是，需要像 Dan 指出的那样完成其他事情。我注意到，如果我将 GridView 移到模态 div 之外，那么表格会显示更新后的搜索结果。所以这让我认为这是实际的 JQuery 对话框而不是 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");
}

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

【讨论】：