Используйте jQuery dataTables с таблицами, созданными обратными вызовами ajax с использованием tmpl - PullRequest
Новая
       19

Используйте jQuery dataTables с таблицами, созданными обратными вызовами ajax с использованием tmpl

3 голосов
/ 11 июля 2011

Я использую шаблоны jQuery и плагин dataTables для создания сеток в моем приложении.Во всех случаях я вызываю веб-службу ASMX с помощью вызова ajax, а в функции обратного вызова я отображаю вывод с помощью команды 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 

    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 Ответ

0 голосов
/ 18 июля 2011

Может быть, вам нужно уничтожить таблицу данных, прежде чем вы сможете сделать ее заново. По крайней мере, вот что я делаю: 

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