jQueryを使用した検索とページサイズの選択ポストバック時にデータテーブルが消える

Question

私は、ブートストラップスタイルのテーブルをラップするQueryデータテーブルを使用しています。行は、.netリピータコントロールを使用して設定されます。 最初に、検索テキストボックスとページサイズ選択の両方のドロップダウンが表示されます。私がポストバックを引き起こすと、テーブルのデータは更新されますが、検索テキストボックスとページサイズ選択ドロップダウンは消えます。

これは.aspxのである：

.aspxの中

<asp:UpdatePanel runat="server" ID="upnlPC" RenderMode="Block"> 
    <ContentTemplate> 
     <div runat="server" id="divTRP" style="display:block"> 
      <table id="fcTRPTable" class="table table-striped table-bordered table-hover table-responsive"> 
       <thead> 
        <tr> 
         <th>Area</th> 
         <th>District</th> 
         <th>Plant</th> 
        </tr> 
       </thead> 

       <tbody> 
        <asp:Repeater runat="server" ID="rptTRPTableData"> 
         <ItemTemplate> 
          <tr> 
           <td runat="server" id="tdArea"><%# Eval("Area") %></td> 
           <td runat="server" id="tdDistrict"><%# Eval("District") %></td> 
           <td runat="server" id="tdFacility"><%# Eval("Plant") %></td> 
         </ItemTemplate> 
        </asp:Repeater> 
       </tbody> 
      </table> 
     </div> 
    </ContentTemplate> 
</asp:UpdatePanel> 

<script> 
    $(document).ready(function() { 
     // DataTable, save state 
     var adminUsersDT = $('#fcTRPTable').DataTable({ 
      'bDestroy':true, 
      "bStateSave": true, 
      dom: 'lfrtip', 
      "fnStateSave": function (oSettings, oData) { 
       localStorage.setItem('fcTRPTable', JSON.stringify(oData)); 
      }, 
      "fnStateLoad": function (oSettings) { 
       return JSON.parse(localStorage.getItem('fcTRPTable')); 
      } 
     }); 
    }); 
</script> 

、をPage_Load（）：

DataTable dtVD = someBLL.GiveMeTableData(); 
rptTRPTableData.DataSource = dtVD; 
rptTRPTableData.DataBind(); 

ソリューション

初期の問題との問題は、データという事実でしたテーブルが更新パネル内にありました。それは、検索テキストボックスやページサイズ選択のドロップダウンとは関係がありませんでした。 jQueryデータテーブル全体が再描画されませんでした。

私のためのソリューションは、この（次のJavaScriptコードを追加しました）であった：

$(function() { 
    bindDataTable(); // bind data table on first page load 
    // bind data table on every UpdatePanel refresh 
    Sys.WebForms.PageRequestManager.getInstance().add_endRequest(bindDataTable); 
}); 

function bindDataTable() { 
    var adminUsersDT = $('#fcTable').DataTable({ 
     'bDestroy': true, 
     "bStateSave": true, 
     dom: 'lfrtip', 
     "fnStateSave": function (oSettings, oData) { 
      localStorage.setItem('fcTable', JSON.stringify(oData)); 
     }, 
     "fnStateLoad": function (oSettings) { 
      return JSON.parse(localStorage.getItem('fcTable')); 
     } 
    }); 
} 

Answer 1

私は上記の編集した質問に私の問題の解決策を掲載しました。それは誰かが数時間の時間と数本の髪の毛を節約するのを助けてくれることを願っています。