AnglarJS(二)分页插件使用

1.引入分页js，css插件

1）在js中引入

<!-- 分页组件开始 --> <!--css--> <link rel="stylesheet" href="../plugins/angularjs/pagination.css"> <!--js--> <script src="../plugins/angularjs/pagination.js"></script> <!-- 分页组件结束 -->

2)在模块中引入插件

//控制器模块儿 var app = angular.module('pyg', [ 'pagination' ]);

2、引入AnglarJS分页控件

1）在在控制器下引入分页插件控制器

//1）在在控制器下引入分页插件控制器 //分页控件配置 $scope.paginationConf = { currentPage : 1, totalItems : 10, itemsPerPage : 10, perPageOptions : [ 10, 20, 30, 40, 50 ], onChange : function() { $scope.reloadList();//重新加载 } };

2）在页面body中引入分页插件视图

<!--2）在页面body中引入分页插件视图--> <!-- 分页视图 --> <!-- conf="paginationConf" ：视图引用控制器方法配置--> <tm-pagination conf="paginationConf"></tm-pagination>

3、定义刷新方法，该方法会在数据发生变化时自动加载

//刷新页面 $scope.reloadList = function() { $scope.findPage($scope.paginationConf.currentPage, $scope.paginationConf.itemsPerPage) };

4、定义分页查询方法

//分页查询 $scope.findPage = function(page, rows) { var url = "/brand/findPage?page=" + page + "&rows=" + rows; $http.post(url).success(function(data) { $scope.entitys = data.rows; $scope.paginationConf.totalItems = data.total; }) };