angualrjs实现分页查询

首页引入

<script type="text/javascript" src="framework/tm.pagination.js"></script>

根目录注入：

var routerApp=angular.module('routerApp',['ui.router','ngAnimate','tm.pagination','ui.bootstrap']);

页面上：

<tm-pagination conf="paginationConf"></tm-pagination>

controller代码

     //  查询列表
                var reSearch = function() {
                    var postData = {
                        //发送给后台的请求数据
                        currentPage: $scope.paginationConf.currentPage,
                        pageSize: $scope.paginationConf.itemsPerPage,
                        pickup: $scope.pickups,
                        startTime: $scope.startTime,
                        endTime: $scope.endTime,
                        minMoney: $scope.minMoney,
                        maxMoney: $scope.maxMoney
                    };
                    $http.post('findPickupByMultiConditionAndPage', postData).success(function(response) {
                        $scope.paginationConf.totalItems = response.totalElements; //总条数
                        $scope.takeGoodsLists = response.content; //具体内容
                        //共享的数据赋值
                    });
                }
                $scope.reSearch = reSearch;
                //配置分页基本参数
                $scope.paginationConf = {
                    currentPage: 1, //起始页
                    //        totalItems:300,//总共有多少条记录
                    itemsPerPage: 5, // 每页展示的数据条数
                    //        pagesLength:5,//分页条目的长度
                    perPageOptions: [5, 10, 20] //可选择显示条数的数组
                };


                //当页码和页面记录数发生变化时监控后台查询如果把currentPage和itemsPerPage分开监控的话则会触发两次后台事件。
                $scope.$watch('paginationConf.currentPage +paginationConf.itemsPerPage', reSearch);