angularjs ajax datatable,AngularJs + Datatables 显示表格

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;

});

}

}])