1、需要加入的资源文件
ajax/thirdparty/angular-1.6.2/angular-ui-router.js,
ajax/thirdparty/angular-1.6.2/angular-resource.min.js,
ajax/libs/angular-datatables/0.5.5/angular-datatables.min.js">
2、在模块中注入datatbles依赖
APP_NAME = "showCaseApp";
var showCaseApp = angular.module(APP_NAME, ["ui.router","datatables","ngResource"]);
3、HTML文件
ng-options="x.name for x in rang" ng-change="change()">
dt-columns="showCase.dtColumns" dt-instance="showCase.dtInstance" class="row-border hover">
4、JavaScript文件
angular.module(APP_NAME).controller('WithPromiseCtrl',
["$scope", "$rootScope","$http", "$q","utils","DTOptionsBuilder","DTColumnBuilder","$resource",
function ($scope,$rootScope,$http,$q,utils,DTOptionsBuilder, DTColumnBuilder,$resource) {
$scope.rang = [
{value:3,name:'最近3天'},
{value:7,name:'最近7天'},
{value:30,name:'最近一个月'},
{value:0,name:'全部'}
];
var vm = this;
vm.dtOptions = DTOptionsBuilder.fromFnPromise(function() {
var defer = $q.defer();
$http.get("/" + utils.getContextPath() + "/board/getActivityList?range=" + 3 + "&module=" + $rootScope.nodeText)
.then(function(result) {
defer.resolve(result.data.data);
});
return defer.promise;
}).withPaginationType('simple_numbers');
vm.dtColumns = [
DTColumnBuilder.newColumn('actionTime').withTitle('活动时间'),
DTColumnBuilder.newColumn('dept4').withTitle('四级部门'),
DTColumnBuilder.newColumn('userId').withTitle('姓名'),
DTColumnBuilder.newColumn('subModule').withTitle('活动类型'),
DTColumnBuilder.newColumn('actionDesc').withTitle('活动描述'),
DTColumnBuilder.newColumn('offering').withTitle('版本号')
];
vm.dtInstance = {};
$scope.change = function(){
vm.dtInstance.changeData(function() {
// return $resource(
// "/" + utils.getContextPath() + "/board/getActivityList?range=" + $scope.selectedRang.value + "&module=" + $rootScope.nodeText)
// .get().$promise;
var defer = $q.defer();
$http.get("/" + utils.getContextPath() + "/board/getActivityList?range=" + $scope.selectedRang.value + "&module=" + $rootScope.nodeText)
.then(function(result) {
defer.resolve(result.data.data);
});
return defer.promise;
});
}
}])
如果觉得《angularjs ajax datatable AngularJs + Datatables 显示表格》对你有帮助，请点赞、收藏，并留下你的观点哦！
