2016-03-30 5 views
1

Ich versuche, serverseitige Paginierung auf einem Winkeldatentabelle zu implementieren, aber ich halte auf den folgenden Fehler erhalten: Error: You cannot use server side processing along with the Angular renderer!Winkeldatentabellen Server Paginierung

Bitte lesen Sie den entsprechenden Code unten:

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

Ich weiß, über einige Syntaxfehler in dem Code gibt es, aber ich kann nicht über die ursprünglichen Server-Seite Verarbeitungsfehler zu bekommen scheint. Ursprünglich habe ich eine HTTP-POST-Anfrage an den API-Endpunkt gestellt und die Antwort mit ng-repeat angezeigt. Ich dachte, dass dieser Fehler wegen ng-repeat ausgelöst wurde, aber nach dem Entfernen dieses Codes und dem Versuch, die Tabellendaten über die .withOption('ajax', etc. stattdessen zu generieren, wird der Fehler weiterhin ausgelöst. Jede Hilfe würde sehr geschätzt werden. Vielen Dank.

+0

Wie erhalten Sie Limit- und Offset-Parameter? – zygimantus

Antwort

3

entfernen ng aus der datatable Richtlinie Erklärung, das heißt

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

Auch wenn Sie jetzt mit AJAX-Rendering, Sie sind das Markieren nach wie vor die Tabelle als durch ng-repeat Rendering zu sein.