javascript - Angular Datatables REST 基于每页数据，具有显式表格呈现

Question

我遵循了 Fabrício Matté 的方法“DataTables: Custom Response Handling”。但是，我的要求是避免通过回调呈现表的行和列。相反，想要遍历当前 ajax 请求返回的 json 数据并呈现显式 html (tr/td) 以获得更多控制。因此，目前我看到我的表上显示了两次数据。同时，我了解到回调正在呈现页面相关按钮:prev、1,2 next 等，以及我想重用但不想避免自定义实现的点击事件。

JS:

function notificationsCtrl($scope,$http,$resource, DTOptionsBuilder, DTColumnBuilder) {
var vm = this;
vm.notifications = [];
$scope.dtOptions = DTOptionsBuilder.newOptions()
    .withOption('serverSide', true)
    .withOption('ajax', function(data, callback, settings) {
        // make an ajax request using data.start and data.length
        $http.get('notifications/list?page=' + (((data.start)/10)+1)).success(function(res) {
            // map your server's response to the DataTables format and pass it to
            // DataTables' callback
            callback({
                recordsTotal: 120,
                recordsFiltered: 120,
                data: res
            });
            vm.notifications = res;
        });
    })
    .withDataProp('data') // IMPORTANT¹
    .withOption('processing', true)
    .withPaginationType('full_numbers');

    $scope.dtColumns = [
                        DTColumnBuilder.newColumn('notificationId').withTitle('notificationId'),
                        DTColumnBuilder.newColumn('createUserId').withTitle('createUserId'),
                        DTColumnBuilder.newColumn('Language').withTitle('language')
                      ];

HTML:样本但实际需要对一些 td 标签进行额外处理

<table datatable="" dt-options="dtOptions" dt-columns="dtColumns" class="table table-striped table-bordered table-hover">
                <thead>
                        <tr>
                            <th>Id</th>
                            <th>Title</th>
                            <th>Language</th>
                            <th>Last Updated</th>
                            <th>Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr ng-repeat="notification in wynkCMSToolApp.notifications">
                            <td>{{ notification.notificationId }}</td>
                            <td>{{ notification.title }}</td>
                            <td>{{ notification.Language }}</td>
                        </tr>
                    </tbody>
            </table>

Answer 1

如果您想直接在 HTML 中呈现，请考虑使用 Angular renderer .但是，此类渲染器不支持服务器端处理。

所以我建议您将服务器端处理与 columns.render 一起使用功能。

这里是example使用渲染功能。