Question

I am using jQuery templates and the dataTables plug-in to create grids in my application. In all cases I invoke an ASMX web service via an ajax call and in the callback function I render the output using the tmpl command and then finally apply the dataTables plug-in to the generated table. I’m having difficulties in updating the dataTables grid after deleting, inserting or updating to show the changes and the docs have not been much help. Has anyone else done anything similar to this? What is the best way to update my 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 another function to for instance, delete a record, I would expect that I could just execute the JavaScript code to call the ajax and re-render the template and reapply the dataTables plug-in to the table but it is not working properly. Row count is off.

Answer 1

Maybe you need to destroy the datatable, before you can re-render it. At least thats what I am doing:

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