AngularJS 分页插件

1.在项目中引入 

    <!-- 分页组件开始 -->
    <script type="text/javascript" src="../plugins/angularjs/pagination.js"></script>
    <script type="text/javascript" src="../plugins/angularjs/pagination.css"></script>

2.在自定义的模块中引入  

pagination 模块
    var app=angular.module('自定义的模块名',['pagination']);

3.编写script

<script  type="text/javascript">
        var app=angular.module('xxx',['pagination']);
        app.controller("brandController",function($scope,$http){
            //查询品牌列表
            $scope.findAll=function(){
                //当前路径是：http://localhost:9101/admin/index.html
                //数据路径是：http://localhost:9101/brand/findAll.do
                $http.get("../brand/findAll.do").success(
                        //response这个不是关键字
                        function(response){
                            $scope.list=response;
                        }
                );
            }
            
            //分页控件配置 currentPage:当前页 totalItems：总记录数 itemsPerPage：每页记录数
            //perPageOptions：分页选项  onChange:当页码变更后自动触发的方法
            //下面是给的默认值，随便写
            $scope.paginationConf ={
                    currentPage:1,
                    totalItems:10,
                    itemsPerPage:10,
                    perPageOptions:[10,20,30,40,50],
                    onChange:function(){
                        //当页码改变时，调用下面方法
                        $scope.reloadList();
                    }
            };
            
            //刷新列表
            $scope.reloadList=function(){
                $scope.findPage($scope.paginationConf.currentPage,$scope.paginationConf.itemsPerPage);
            }
            
            $scope.findPage=function(page,size){
                $http.get('../brand/findPage.do?page='+page+'&size='+size).success(
                    function(response){
                        $scope.list=response.rows;//显示当前页数据
                        $scope.paginationConf.totalItems=response.total;//更新总记录数
                    }        
                );
            }
            
        });
    </script>

4.html引入自定义模块 xxx,自定义controller brandController

<body class="hold-transition skin-red sidebar-mini" ng-app="xxx" ng-controller="brandController">

5.在body里引入分页

                  <!--数据列表/ 
                                  分页组件tm-pagination
                                  paginationConf可以在script中指定属性-->                        
                              <tm-pagination conf="paginationConf"></tm-pagination>

6.显示效果

 

posted on 2019-06-14 11:30  成魔的蜘蛛  阅读(429)  评论(0)    收藏  举报

导航