Question

我正在尝试在角度数据表上实现服务器端分页，但我继续收到以下错误：Error: You cannot use server side processing along with the Angular renderer!

请参阅以下相关代码：

purchasesTable.jade

.panel.panel-default.userTable
  .panel-heading.tableStatementHeader Purchases
  .panel-body
    div()
      table.row-border.hover(datatable='ng', dt-options='purchasesCtrl.dtOptions', dt-columns='purchasesCtrl.dtColumns')

purchasesTable.controller.js

    (function() {
        'use strict';

        angular
            .module('app.purchasesTable')
            .controller('PurchasesTableController', PurchasesTableController);

        PurchasesTableController.$inject = ['envService','$resource', 'DTOptionsBuilder', 'DTColumnBuilder','$http','$state','$stateParams','PurchasesTableService', '$scope'];
        function PurchasesTableController(envService, $resource, DTOptionsBuilder, DTColumnBuilder,$http,$state,$stateParams,PurchasesTableService,$scope) {

            var vm = this;

            activate();

            ////////////////

            function activate() {
              vm.id = $stateParams.id;

              //STYLE TABLES
              vm.dtOptions = DTOptionsBuilder.newOptions()
                                .withOption('ajax', function(data, callback, settings){
                                  console.log(data);

                                  PurchasesTableService.getData()
                                    .then(function(result){
                                      console.log('THIS', result);
                                    });
                                })
                                .withDataProp('data')
                                .withOption('serverSide', true)
                                .withOption('processing', true)
                                .withOption('order', [[0, 'desc']])
                                .withPaginationType('full_numbers');
              vm.dtColumns = [
                  DTColumnBuilder.newColumn('event_date').withTitle('Event Date'),
                  DTColumnBuilder.newColumn('title').withTitle('Store'),
                  DTColumnBuilder.newColumn('reason').withTitle('Reason'),
                  DTColumnBuilder.newColumn('amount').withTitle('Amount'),
                  DTColumnBuilder.newColumn('locking_date').withTitle('Locking Date'),
                  DTColumnBuilder.newColumn('id').withTitle('ID'),
                  DTColumnBuilder.newColumn('sid').withTitle('SID')
              ];

        }
    }
})();

purchasesTable.service.js

(function() {
    'use strict';

    angular
        .module('app.purchasesTable')
        .service('PurchasesTableService', PurchasesTableService);

    PurchasesTableService.$inject = ['$http'];
    function PurchasesTableService($http) {
        this.getData = getData;

        ////////////////

        function getData () {
          var gaBody = {
            'start':0,
            'length':10,
            'columns[0][data]':1,
            'order[0][column]':0,
            'order[0][dir]':'desc'
          };
          var req = {
            method: 'POST',
            url: 'api/endpoint',
            headers: {
              'Authorization': 'something something'
            },
            data: gaBody
          };
          return $http(req).then(function(resp) {
            return resp.data.data;
          });
        }
      }
})();

我知道上面的代码中存在一些语法错误，但我似乎无法通过初始服务器端处理错误。最初，我正在向API端点发出http POST请求，并使用ng-repeat显示响应。我认为这个错误是因为ng-repeat而被抛出但是在删除该代码并尝试通过.withOption('ajax', etc.生成表数据之后，错误仍然被抛出。任何帮助将不胜感激。谢谢。

Answer 1

从ng指令声明中删除datatable，即

table.row-border.hover(datatable='', dt-options='purchasesCtrl.dtOptions', dt-columns='purchasesCtrl.dtColumns')
                                 ^^

即使您现在使用AJAX进行渲染，您仍然会将表标记为ng-repeat呈现。

angular datatables服务器分页

1 个答案: