Use jQuery dataTables with tables generated by ajax callbacks using tmpl -
Use jQuery dataTables with tables generated by ajax callbacks using tmpl -
i using jquery templates , datatables plug-in create grids in application. in cases invoke asmx web service via ajax phone call , in callback function render output using tmpl command , apply datatables plug-in generated table. i'm having difficulties in updating datatables grid after deleting, inserting or updating show changes , docs have not been much help. has else done similar this? best way update grid display?
template code
<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>
after executing function instance, delete record, expect execute javascript code phone call ajax , re-render template , reapply datatables plug-in table not working properly. row count off.
maybe need destroy datatable, before can re-render it. @ to the lowest degree thats doing:
// destroy old table $("#approletable").datatable().fndestroy();
jquery ajax datatables jquery-templates
Comments
Post a Comment