angular datatables server pagination

Question

I am trying to implement server-side pagination on an angular datatable but I keep on getting the following error: Error: You cannot use server side processing along with the Angular renderer!

Please see the relevant code below:

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

I know there are some syntax errors in the code above but I can't seem to get past the initial server side processing error. Originally, I was making an http POST request to the API endpoint and displaying the response using ng-repeat. I thought that this error was being thrown because of ng-repeat but after removing that code and trying to generate the table data through the .withOption('ajax', etc. instead, the error is still being thrown. Any help would be greatly appreciated. Thank you.

How do you pass limit and offset parameters?

zygimantus
– zygimantus

2017-05-06 19:52:18 +00:00
Commented May 6, 2017 at 19:52 — zygimantus
– zygimantus, Commented May 6, 2017 at 19:52

davidkonrad · Accepted Answer · 2016-04-03 16:07:05Z

6

Remove ng from the datatable directive declaration, i.e.

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

Even though you now are rendering with AJAX, you are still flagging the table as being rendering by ng-repeat.

answered Apr 3, 2016 at 16:07

davidkonrad

85.7k17 gold badges211 silver badges273 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

angular datatables server pagination

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related