paginations serveur datatables angulaire

Question

Je suis en train de mettre en œuvre sur une datatable angulaire pagination du côté serveur, mais je continue à obtenir l'erreur suivante: Error: You cannot use server side processing along with the Angular renderer!

S'il vous plaît voir le code correspondant ci-dessous:

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; 
      }); 
     } 
     } 
})(); 

Je sais qu'il ya des erreurs de syntaxe dans le code ci-dessus, mais je ne peux pas sembler passer l'erreur de traitement côté serveur initial. À l'origine, je faisais une requête http POST au point de terminaison API et j'affichais la réponse en utilisant ng-repeat. Je pensais que cette erreur était levée à cause de ng-repeat mais après avoir supprimé ce code et essayé de générer les données de la table via le .withOption('ajax', etc. à la place, l'erreur est toujours levée. Toute aide serait grandement appréciée. Je vous remercie.

Answer 1

Retirer ng de la déclaration de directive datatable, à savoir

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

Même si vous êtes rendu maintenant avec AJAX, vous êtes toujours en berne la table comme étant rendu par ng-repeat.