1薄风、需要加入的資源文件

<script
    src="${cdnUrl}/??ajax/thirdparty/angular-1.6.2/angular.js,
    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"></script>

2、在模塊中注入datatbles依賴

APP_NAME = "showCaseApp";
var showCaseApp = angular.module(APP_NAME, ["ui.router","datatables","ngResource"]);

3、HTML文件

<div  ng-controller="WithPromiseCtrl as showCase">

    <select ng-init="selectedRang = rang[0]" ng-model="selectedRang"
        ng-options="x.name for x in rang" ng-change="change()">
    </select>

    <table datatable="" dt-options="showCase.dtOptions"
        dt-columns="showCase.dtColumns" dt-instance="showCase.dtInstance" class="row-border hover"></table>
</div>

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;
                });
                                        
            }
            
            
}])