使用jQuery數據表與使用tmpl由ajax回調生成的表格

我正在使用jQuery模板和dataTables插件在我的應用程序中創建網格。在所有情況下，我通過ajax調用調用ASMX Web服務，並在回調函數中使用tmpl命令呈現輸出，最後將dataTable插件應用於生成的表。在刪除，插入或更新以顯示更改以及文檔沒有太大幫助後，我在更新dataTables網格時遇到困難。有沒有其他人做過類似的事情？什麼是更新我的網格顯示的最佳方式？使用jQuery數據表與使用tmpl由ajax回調生成的表格

模板代碼

<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代碼

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>

後執行其他功能，例如，刪除一條記錄，我希望我可以只執行調用ajax並重新呈現模板並重新應用dataTable的JavaScript代碼即插即用，但無法正常工作。行數已關閉。

來源

2011-07-11 CtrlShiftF11

發佈您的代碼，以便我們可以幫助您 –

比較遺憾的是尼古拉，我已經編輯，並把頁面上的網格的一個示例。 – CtrlShiftF11

也許你需要銷燬數據表，然後才能重新渲染它。至少那是我在做什麼：

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

來源

2011-07-18 15:29:29 Gigo

它的工作原理，但使用Ajax調用$就IM（{ URL：「URL」， ASYN：假的，類型：「GET」，數據：{ID：ID}，數據類型： 'JSON'， contentType：「application/json; charset = utf-8」， success：function（data）{ GetList（）; }，}）;我的GetList是函數，並在該fnDestroy使用，在調用此後在jquerydatatable.js錯誤節點被發現，document.ready時代它的工作 –

如果您有問題，請發佈一個新的問題。 – Gigo

thnks，但我得到答案 –

使用jQuery數據表與使用tmpl由ajax回調生成的表格

回答

相關問題