角度のDataTableサーバーページネーション

Question

私は角のDataTableにサーバー側のページネーションを実装しようとしていますが、私は次のエラーを取得し続ける：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

あなたは今、AJAXでレンダリングされているにもかかわらず、あなたはまだng-repeatによってレンダリングされるようにテーブルにフラグを設定している、datatableディレクティブ宣言から、すなわち

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

をngを削除します。