How invoke angular datatable pagination refresh callback after data update?

Question

I have angular datatable config which works fine. My config looks like

  vm.dtOptions = DTOptionsBuilder.newOptions().
            withPaginationType('full_numbers').
            //withOption('ajax', {
            //    url: 'rest/get/'+entityName,
            //    type: 'GET'
            //}).
            withOption('serverSide', true).
            withOption('ajax', function(data, callback, settings) {
                    EntityManager.get({entity:entityName,action:'get',start:data.start,length:data.length}).$promise.then(function(response) {
                    console.log('response');
                    console.log(response);
                    vm.objectList = response.data;

                    callback({
                        recordsTotal:    response.recordsTotal,
                        recordsFiltered: response.recordsFiltered,
                        data: response.data
                    });

                });
            }).
            withDataProp('data').
            withOption('processing', true).
            withOption('bFilter', false).
            withOption('bSort', false).
            withOption("aaSorting", []).
            withDisplayLength(10);

But I also have filtering function which updates data and recordsTotal and thus, pagination should be re-rendered - last button number must be modified. But it doesn't occur. Is there a way to call

 callback({
      recordsTotal:    response.recordsTotal,
      recordsFiltered: response.recordsFiltered,
      data: response.data
 });

from controller? What objects and what method updates pagination?

user2104560 · Accepted Answer · 2015-11-04 04:07:08Z

Ok, finally I found the solution. First of all, add dt-instance in markup:

 <div ng-controller="DataTableController as listTable" ng-init="init('informsystem')">
   <table datatable="" dt-options="listTable.dtOptions" dt-instance="listTable.dtInstance" class="row-border hover">

declare dtInstance variable in controller and initialize it. Also, get all ajax callback logic to separate function and pass it in dtoptions and in filter:

 var vm = this;
 vm.dtInstance = {}; //MUST BE INITIALIZED! DON'T FORGET vm.(this) before varName

        var ajaxCallback = function(data, callback, settings) {
            $scope.filter.start = data.start;
            $scope.filter.length = data.length;
            console.log($scope.filter);
            EntityManager.get($scope.filter).$promise.then(function(response) {
                console.log('response');
                console.log(response);
                vm.objectList = response.data;

                callback({
                    recordsTotal:    response.recordsTotal,
                    recordsFiltered: response.recordsFiltered,
                    data: response.data
                });

            });
        };

use ajaxCallback in config:

   ....withOption('ajax', ajaxCallback ).....

in doFilter/doSearch:

  $scope.doFilter = function () {
            console.log(vm.dtInstance);
            vm.dtInstance.changeData(ajaxCallback);
        };

$scope.filter populated in init with common params of $resource and start and length (offset) added in callback. Also, filter contains values from filter html inputs binded via ng-model.

Collectives™ on Stack Overflow

How invoke angular datatable pagination refresh callback after data update?

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