私のアプリケーションでは、jQueryテンプレートとdataTablesプラグインを使用してグリッドを作成しています。すべての場合、私はajax呼び出しでASMX Webサービスを呼び出し、コールバック関数ではtmplコマンドを使用して出力をレンダリングし、最後にdataTablesプラグインを生成された表に適用します。私は削除、挿入、または変更を表示するために更新した後、dataTablesグリッドを更新することに困難を抱えています。他に誰もこれに似た何かをしましたか?グリッド表示を更新する最良の方法は何ですか?tmplを使用してajaxコールバックによって生成されたテーブルでjQueryデータテーブルを使用する
テンプレートコード
<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を再適用しますプラグインをテーブルに追加できますが、正しく動作していません。行数がオフです。
を私たちはあなたにそのニコラについては申し訳ありません –
を助けることができるようにあなたのコードを投稿し、私が編集され、ページ上のグリッドの1例を入れています。 – CtrlShiftF11