品牌管理--angularJS的分页模块实现分页查询

1.1 前端代码实现思路分析

1.  明确目标功能，在品牌管理下方放置分页栏，实现分页查询功能。
2. 使用的第三方的分页插件，angularJS的分页模块。（需要引入angularJS相关的分页模块pagination.css 和 pagination.js）
3. 在pagination.js中有分页模块，pagination为模块名，[]为分页数组，directive定义一个指令，这里定义了一个tmPagination指令，使用了这个指令就使用到了下面的模块

   angular.module('pagination', []).directive('tmPagination',[function(){
       return {
          ......
           },

4. 目标就是将分页模块在项目中使用。首先在我们需要分页的HTML页面中引入pagination.css  与 pagination.js
5. 因为我们需要使用到angularJS的分页模块，所以我们在定义模块的时候需要指令使用它的模块。将模块加进来之后，tmPagination这个指令在我们自己的模块中就可以使用了。
   var  app = angular.module('XXX',['pagination']);
6. 在table结束的位置加上分页指令tmPagination ，格式<tm-pagination/>,还需要传一些参数（conf）,即<tm-pagination conf="paginationconf"/>是一个json对象，才能把指令初始化出来，要放在scope里面才能取到.
7. 在控制器中定义分页指令需要的配置信息对象,需要json对象，则定义为 $scope.paginationConf={};我们需要知道json对象中有哪些属性，在pagination.js文件中寻找，因为放在scope里面去了，conf点出来的都是它里面的属性。
8. 我们传当前页码，和总记录数，页大小，页码下拉列表框。把之前findAll（）方法去掉，在body的位置，ng-init ,因为我们现在使用分页查询。
9. 一进来我们需要查询数据，点跳转页面的时候也需要查询数据，如何监听它查询数据，它提供了onchange事件 ,此时在onchange中查询数据即可，alert($scope.paginationconf.currentPage);获取到当前页码。
10. 查到数据之后放到scope的dataList中就好了，定义分页查询品牌方法$scope.search
11. 在onchange里面调用一下分页查询品牌方法，后台需要两个参数，当前页码，页大小
12. 发送异步请求查询品牌，$http.get（）；注意get请求传参，使用问号的方式传
13. 获取响应数据格式，response.data{total:100,rows:{[],[],[],[]}}           总记录数是写死的，我们需要给它赋值所以  $scope.dataList= response.data.rows;
14.  更新分页指令的总记录数：$scope.paginationconf.totalItems=response.data.total;

• 注意：写完前端代码我们可以测试一下是否没有问题， 确保没有问题之后再写后端代码，如图所示，看控制台，它已经给你发请求了，只是你没有查到数据而已，因为后台没有处理请求，此时我们需要把后台写好就行了。

注：下面截图只展示了一部分属性 

1.2 前端代码实现

 在品牌管理下方放置分页栏，实现分页功能：

1.2.1 页面

在sunny-manager-web/src/main/webapp/admin/brand.htm引入分页模块 

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

在构建app模块时引入pagination模块：

var app = angular.module(