2

angularデータテーブルにサーバー側のページネーションを実装しようとしていますが、次のエラーが発生し続けます: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.代わりに を介してテーブル データを生成しようとした後も、エラーは引き続きスローされます。どんな助けでも大歓迎です。ありがとうございました。

4

1 に答える 1

6

ディレクティブ宣言ngから削除します。つまり、datatable

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

現在は AJAX でレンダリングしていますが、まだ表が によってレンダリングされているというフラグを立てていますng-repeat。

于 2016-04-03T16:07:05.083 に答える