This repository was archived by the owner on Feb 2, 2025. It is now read-only.
This repository was archived by the owner on Feb 2, 2025. It is now read-only.
Can't use reloadData() when use 'ajax' option with DataTable 10.1 #37
Closed
Description
Hello @l-lin ,
I have a scenario that when I click on search button on search criteria panel, the data in datatable will be refreshed.
My code look like this :
controller('AgiMConfigController', function($scope, $location, $compile, AgiMConfigService, $routeParams, DTOptionsBuilder, DTColumnBuilder){
"use strict";
$scope.dtOptions = DTOptionsBuilder.newOptions()
.withOption('ajax', {
"contentType": "application/json; charset=utf-8",
dataType: "json",
"url": "service/agimconfig/",
"type": "POST",
"data": function ( d ) {
console.log("data");
d.search = $scope.searchData || {}; //search criteria
return JSON.stringify(d);
}
})
.withOption('processing', true)
.withOption('serverSide', true)
.withOption('filter', false)
.withPaginationType('full_numbers');
$scope.dtColumns = [
DTColumnBuilder.newColumn('configKey').withTitle('Config Key'),
DTColumnBuilder.newColumn('configValue').withTitle('Config Value'),
DTColumnBuilder.newColumn('configGroup').withTitle('Config Group'),
DTColumnBuilder.newColumn('description').withTitle('Description'),
DTColumnBuilder.newColumn('remark').withTitle('remark')
];
$scope.$on('event:dataTableLoaded', function(event, data) {
console.log('event:dataTableLoaded:'+data);
$scope.tableId = data.id;
$scope.search = function() {
$scope.searchData = angular.copy($scope.criteria);
$scope.dtOptions.reloadData();
};
});
}).
...The problem is reloadData() doesn't work.
So, I try to implement in other way. It work correctly.
My code look like this :
controller('AgiMConfigController', function($scope, $location, $compile, AgiMConfigService, $routeParams, DTOptionsBuilder, DTColumnBuilder){
"use strict";
console.log('test AgiMConfigController');
$scope.dtOptions = DTOptionsBuilder.newOptions()
.withOption('ajax', {
"contentType": "application/json; charset=utf-8",
dataType: "json",
"url": "service/agimconfig/",
"type": "POST",
"data": function ( d ) {
console.log("data");
d.search = $scope.searchData || {}; //search criteria
return JSON.stringify(d);
}
})
.withOption('processing', true)
.withOption('serverSide', true)
.withOption('filter', false)
.withPaginationType('full_numbers');
$scope.dtColumns = [
DTColumnBuilder.newColumn('configKey').withTitle('Config Key'),
DTColumnBuilder.newColumn('configValue').withTitle('Config Value'),
DTColumnBuilder.newColumn('configGroup').withTitle('Config Group'),
DTColumnBuilder.newColumn('description').withTitle('Description'),
DTColumnBuilder.newColumn('remark').withTitle('remark')
];
$scope.$on('event:dataTableLoaded', function(event, data) {
console.log('event:dataTableLoaded:'+data);
$scope.tableId = data.id;
$scope.search = function() {
$scope.searchData = angular.copy($scope.criteria);
console.log("search");
$('#'+$scope.tableId).DataTable().ajax.reload();
};
});
}).
...In my opinion, it very complicated. I have no idea how to implement this scenario in other simple way. Do you have suggestions?
Thank you.
Metadata
Metadata
Assignees
Labels
No labels