Reputation:
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?
Upvotes: 2
Views: 3514
Reputation:
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
.
Upvotes: 2