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

 

一、后端使用 PageHelper插件

---

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

<dependency>
    <groupId>com.github.pagehelper</groupId>
    <artifactId>pagehelper</artifactId>       
</dependency>

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

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

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

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

二、前端使用分页插件（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

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

<script type="text/javascript" src="../plugins/angularjs/pagination.js"></script>
<link rel="stylesheet" href="../plugins/angularjs/pagination.css">
<script type="text/javascript">
//1、查询模块需要依赖pagination pagination模块在JS中有定义
var app = angular.module('pinyougou', ['pagination']);
app.controller('brandController', function($scope, $http) {
    $scope.findAll = function() {
        $http.get('../brand/findAll.do').success(function(response) {
            $scope.brandList = response;
        });
    }
    //2、需要在table结束后添加页数显示标签tm-pagination 并定义conf（位于博客最后）
    /*3、将2中定义的conf变量，进行赋值
        currentPage : 页码,
        totalItems : 总记录数,
        itemsPerPage : 每页显示记录数,
        perPageOptions : 需要每页显示多少记录，用户可自定义,
        onChange : 当页码发生变化时，出发事件。
    */
    //分页控件配置 
    $scope.paginationConf = {
        currentPage : 1,
        totalItems : 10,
        itemsPerPage : 10,
        perPageOptions : [ 10, 20, 30, 40, 50 ],
        onChange : function() {
            $scope.reloadList();//重新加载
        }
    };

    //重新加载列表 数据
    $scope.reloadList = function() {
        //切换页码  
        $scope.findPage($scope.paginationConf.currentPage,
                $scope.paginationConf.itemsPerPage);
    }
    
    //需要将查询结果 进行赋值，例如总记录数totalItems
    $scope.findPage = function(page, rows) {
        $http.get('../brand/findPage.do?pageNum=' + page + '&size=' + rows)
                .success(function(response) {
                    $scope.brandList = response.rows;//需要遍历的对象
                    $scope.paginationConf.totalItems = response.total;//总记录数
                });
    }
});

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

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