angularJS实现分页

引入分页组件：

 

<!-- 分页组件开始-->

<script src="../plugins/angularjs/pagination.js"></script>

<link rel="stylesheet" href="../plugins/angularjs/pagination.css">

<!-- 分页组件结束 -->

 

构建app模块时引入pagination模块

var app=angular.module('myapp',['pagination']);//定义模块

 

页面的表格下放置分页组件

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

 

在brandController中添加如下代码

//重新加载列表 数据

$scope.reloadList=function(){

     //切换页码 

$scope.findPage($scope.paginationConf.currentPage, $scope.paginationConf.itemsPerPage);

}

//分页控件配置

$scope.paginationConf = {

         currentPage: 1,

         totalItems: 10,

         itemsPerPage: 10,

         perPageOptions: [10,20, 30, 40, 50],

         onChange: function(){

                 $scope.reloadList();//重新加载

         }

};

//分页

$scope.findPage=function(page,rows){

 

$http.get('../brand/findPage.do?page='+page+'&rows='+rows).success(

            function(response){

                $scope.list=response.rows; 

                $scope.paginationConf.totalItems=response.total;//更新总记录数

            }          

    );

}

 

paginationConf 变量各属性的意义：

currentPage：当前页码

totalItems:总条数

itemsPerPage:

perPageOptions：页码选项

onChange：更改页面时触发事件