tmplを使用してajaxコールバックによって生成されたテーブルでjQueryデータテーブルを使用する

Question

私のアプリケーションでは、jQueryテンプレートとdataTablesプラグインを使用してグリッドを作成しています。すべての場合、私はajax呼び出しでASMX Webサービスを呼び出し、コールバック関数ではtmplコマンドを使用して出力をレンダリングし、最後にdataTablesプラグインを生成された表に適用します。私は削除、挿入、または変更を表示するために更新した後、dataTablesグリッドを更新することに困難を抱えています。他に誰もこれに似た何かをしましたか？グリッド表示を更新する最良の方法は何ですか？

テンプレートコード

<script id="appRoleTemplate" type="x-jquery-tmpl"> 
    <tr id="${AppRoleCode}appRole" onclick="selectAppRole('${AppRoleCode}');" class="appRoleRec"> 
     <td id="appRoleCode${AppRoleCode}" class="dataGrid">${AppRoleCode}</td> 
     <td id="appRoleDesc${AppRoleCode}" class="dataGrid">${ShortDesc}</td> 
    </tr> 
</script> 

JS CODE

function getAppRoleList() { 
     var appBusinessEntityID = <%=Request.QueryString["selectedAppBusinessEntityID"].ToString() %>; 
     $("#appRoleHeader").html("Application Roles - Business Entity " + appBusinessEntityID); 
     $.ajax({ 
      type: "POST", 
      contentType: "application/json", 
      url: "Services/AppRole.asmx/GetAppRoleList", 
      dataType: "json", 
      data: "{'appBusinessEntityID' : " + appBusinessEntityID + "}", 
      success: function (msg) { 
       getAppRoleListCallback(msg); 
      }, 
      error: errorHandler 
     });    
    } 

    function getAppRoleListCallback(result) { 
     var appRoleList = result.d; 
     if (appRoleList.length > 0) { 
      $("#appRoleTemplate").tmpl(appRoleList).appendTo("#appRoleListOutput");      
      var appRoleTable = $("#appRoleTable").dataTable({     
       "bRetrieve": true, 
       "iDisplayLength": 10, 
       "bJQueryUI": true 
      }); 
      var firstAppRoleCode = $(".appRoleRec:first").attr("id"); 
      firstAppRoleCode = firstAppRoleCode.replace("appRole", ""); 
      selectAppRole(firstAppRoleCode); 
     } 
    } 

HTML

       <table id="appRoleTable" class="display"> 
            <thead> 
             <tr> 
              <th align="left">Role Code</th> 
              <th align="left">Description</th> 
             </tr> 
            </thead> 
            <tbody id="appRoleListOutput"> 
            </tbody> 
           </table> 

例えばに別の機能を実行した後、レコードを削除し、私はちょうど実行することができることを期待しますJavaScriptコードを使用してajaxを呼び出し、テンプレートを再レンダリングしてdataTablesを再適用しますプラグインをテーブルに追加できますが、正しく動作していません。行数がオフです。

Answer 1

再レンダリングする前に、データテーブルを破棄する必要があるかもしれません。少なくとも、私がやっている何のthats：

// destroy old table 
$("#appRoleTable").dataTable().fnDestroy();