帶DataTable的JQuery對話框（）

我想知道是否有人可以幫我解決我遇到的問題。我正在使用Asp.net和JQuery UI 1.9.2。我的表單上有一個文本框和一個搜索按鈕。當點擊按鈕時，服務器端查詢數據庫並將所有結果存儲在Gridview中。爲了與Asp.Net GridView的DataTable中工作，我這樣做在CS以下幾點：帶DataTable的JQuery對話框（）

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的是，我用一個jQuery對話框作爲一個模式彈出一個div中。從查詢的結果綁定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內部，因此在搜索過程中不會重新加載頁面。任何人都可以看到我做錯了什麼？

來源

2013-08-23 Eric R.

updatepanel會在每次更新時重繪內容，所以$（document）.ready將只處理第一個實例 - 當頁面加載時觸發。您可以將該代碼功能化並在更新面板時調用它。不發佈爲答案，因爲我認爲這隻會部分解決您的問題 – Dan

從Dan的評論中，我刪除了CreateMemberModal()函數中的$（document）.ready（）邏輯。

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

然而，需要像丹做另外的事情指出：當我需要通過這樣做是爲了重新綁定我的GridView的我現在只能把它在我的CS。我注意到，如果我將GridView移動到模態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"); 
}

所以，當我關閉對話框，我完全摧毀它。然後，當我需要重新進行搜索時，我會重新創建它，並且每件事都像魅力一樣起作用！

來源

2013-08-28 20:52:31

帶DataTable的JQuery對話框（）

回答

相關問題