MyBatis 分页（前后端插件）实现

 

一、后端使用 PageHelper插件

---

【1】引入 PageHelper jar包（Maven项目）

1 <dependency>
2     <groupId>com.github.pagehelper</groupId>
3     <artifactId>pagehelper</artifactId>       
4 </dependency>

【2】MyBatis 配置文件中配置插件（通过 Spring 配置中的 sqlsessionfactory 对此配置文件加载，将PageHelper加载到容器中）

1 <plugins>
2     <!-- com.github.pagehelper 为 PageHelper 类所在包名 -->
3     <plugin interceptor="com.github.pagehelper.PageHelper">
4         <!-- 设置数据库类型 Oracle,Mysql,MariaDB,SQLite,Hsqldb,PostgreSQL 六种数据库-->
5         <property name="dialect" value="mysql"/>
6     </plugin>
7 </plugins>

【3】Server 类中使用插件（重要）

 1 @Override
 2 public PageResult findPage(int pageNum, int pageSize) {
 3     /*@desc 使用插件进行分页处理 插件对分页的处理（重要）
 4      *@parameter: pageNum:页码,pageSize:每页显示记录数
 5      */
 6     PageHelper.startPage(pageNum, pageSize);
 7     //查询结果封装到Page类中，通过Total获取总记录数，Result获取查询的记录数(记录数=pageSize)
 8     Page<TbBrand> page = (Page<TbBrand>) brandMapper.selectByExample(null);
 9     return new PageResult(page.getTotal(),page.getResult());
10 }

二、前端使用分页插件（pagination.js），前端使用AngularJs框架

---

【1】引入 pagination.js 和 pagination.css

       ☞  pagination.js下载地址：https://download.csdn.net/download/lostchris/9425230
       ☞  pagination.css下载地址：https://download.csdn.net/download/zhengzhaoyang122/10641792

   ==== 具体注释说明====

 1 <script type="text/javascript" src="../plugins/angularjs/pagination.js"></script>
 2 <link rel="stylesheet" href="../plugins/angularjs/pagination.css">
 3 <script type="text/javascript">
 4 //1、查询模块需要依赖pagination pagination模块在JS中有定义
 5 var app = angular.module(\'pinyougou\', [\'pagination\']);
 6 app.controller(\'brandController\', function($scope, $http) {
 7     $scope.findAll = function() {
 8         $http.get(\'../brand/findAll.do\').success(function(response) {
 9             $scope.brandList = response;
10         });
11     }
12     //2、需要在table结束后添加页数显示标签tm-pagination 并定义conf（位于博客最后）
13     /*3、将2中定义的conf变量，进行赋值
14         currentPage : 页码,
15         totalItems : 总记录数,
16         itemsPerPage : 每页显示记录数,
17         perPageOptions : 需要每页显示多少记录，用户可自定义,
18         onChange : 当页码发生变化时，出发事件。
19     */
20     //分页控件配置 
21     $scope.paginationConf = {
22         currentPage : 1,
23         totalItems : 10,
24         itemsPerPage : 10,
25         perPageOptions : [ 10, 20, 30, 40, 50 ],
26         onChange : function() {
27             $scope.reloadList();//重新加载
28         }
29     };
30 
31     //重新加载列表 数据
32     $scope.reloadList = function() {
33         //切换页码  
34         $scope.findPage($scope.paginationConf.currentPage,
35                 $scope.paginationConf.itemsPerPage);
36     }
37     
38     //需要将查询结果 进行赋值，例如总记录数totalItems
39     $scope.findPage = function(page, rows) {
40         $http.get(\'../brand/findPage.do?pageNum=\' + page + \'&size=\' + rows)
41                 .success(function(response) {
42                     $scope.brandList = response.rows;//需要遍历的对象
43                     $scope.paginationConf.totalItems = response.total;//总记录数
44                 });
45     }
46 });

【2】页面中 分页栏 显示标签代码如下：（位置是 table 结束后）

1     </table>
2 <!-- 分页显示栏 -->
3 <tm-pagination conf="paginationConf"></tm-pagination>