What is the best way to trigger a refresh callback on Angular datatable pagination after updating the data

Question

What is the best way to trigger a refresh callback on Angular datatable pagination after updating the data

I've successfully set up my angular datatable configuration. Here's what it 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);

However, I'm encountering an issue with the filtering function. It updates the data and recordsTotal, but the pagination doesn't get re-rendered - specifically, the last button number isn't modified as expected. Is there a way to trigger the following code block from the controller?

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

Which objects and methods are responsible for updating the pagination in this context?

javascript angularjs pagination angular-datatables

Answer 1

Answer №1

After much searching, I have finally discovered the solution. Firstly, make sure to include dt-instance in the 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">

In the controller, declare the dtInstance variable and ensure it is initialized. Move all ajax callback logic into a separate function and pass it in dtoptions and filter:

 var vm = this;
 vm.dtInstance = {}; //MAKE SURE TO INITIATE IT! REMEMBER 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
                });

            });
        };

Utilize ajaxCallback in the config:

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

In doFilter/doSearch:

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

$scope.filter is populated in init with common params of $resource, while start and length (offset) are added in the callback. The filter also contains values from html inputs bound via ng-model.

Answer 2

After much searching, I have finally discovered the solution. Firstly, make sure to include dt-instance in the 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">

In the controller, declare the dtInstance variable and ensure it is initialized. Move all ajax callback logic into a separate function and pass it in dtoptions and filter:

 var vm = this;
 vm.dtInstance = {}; //MAKE SURE TO INITIATE IT! REMEMBER 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
                });

            });
        };

Utilize ajaxCallback in the config:

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

In doFilter/doSearch:

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

$scope.filter is populated in init with common params of $resource, while start and length (offset) are added in the callback. The filter also contains values from html inputs bound via ng-model.

What is the best way to trigger a refresh callback on Angular datatable pagination after updating the data

Answer №1

Similar questions

Tips on bringing data from a php file into a javascript variable

Executing API call utilizing the Request module within a node.js application

The potential issue of undefined objects in TypeScript when utilizing computed properties in Vue3

The problem with setting headers in Node Express MySQL: Error message indicating headers cannot be set after they have been sent

Storing various text inputs in a MySQL database

Whenever I attempt to use for or while loops in my application, it consistently crashes

Link property can be added to a bindpopup polygon in Leaflet to have it open in a new tab when clicked

Conceal and Reveal every marker on the map

Express 4 Alert: Headers cannot be modified once they have been sent

Discover the effective method in Angular to display a solitary password validation message while dealing with numerous ones

Creating separate UI-views using ui-router within a single module

Guide to resetting all ReactiveVars to false in Meteor JS

Overlap one element entirely with another

Is there a way to simulate the parameters of a method callback from an external dependency in Nodejs

"Unleashing the power of perpetual testing: A guide to seamlessly integrating Protractor with SauceL

Store and retrieve user input using JavaScript or JSON

Using JSON objects effectively in MVC4, including parsing them seamlessly!

How can I extract only certain keys from a large JavaScript object while keeping the code concise?

Problem arises with table nth-child selector following the addition of grid-gap

Encountering an issue with Angular routing: Cross-origin requests are restricted to specific protocol schemes, such as HTTP