AngularJs + Datatables 显示表格

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;
                });
                                        
            }
            
            
}])
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 134,958评论 19 139
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 173,404评论 25 708
  • Spring Boot 参考指南 介绍 转载自:https://www.gitbook.com/book/qbgb...
    毛宇鹏阅读 46,958评论 6 342
  • 还记得那个充满活力,青春焕发的自己?这样的自己是多么渴望拥有,可它却一直都在的走远。 现在的我,时常会想念充...
    二欢_笑8阅读 233评论 0 1
  • 春撒一颗种子,秋收万担高粱。烧砖泥瓦盖新房,明月小楼到访。 暑夏降温啤酒,寒冬加热琼香。勤劳致富座山冈,自塑门前威望。
    木貞ma阅读 289评论 2 4