design项目：2、mybatis + easyui datagrid 分页查询功能介绍

当前博客介绍的所有代码，均为design项目原代码。

design项目地址：https://github.com/wenhaoran/design

design 项目，用mybatis 来操作数据库 。页面展示 用 easyui 的datagrid 来生成 table。

先说 mybatis 的分页查询。

下面是mybatis 分页的原理。

分页拦截器，用于拦截需要进行分页查询的操作，然后对其进行分页处理。
利用拦截器实现Mybatis分页的原理：
要利用JDBC对数据库进行操作就必须要有一个对应的Statement对象，Mybatis在执行Sql语句前就会产生一个包含Sql语句的Statement对象，而且对应的Sql语句
是在Statement之前产生的，所以我们就可以在它生成Statement之前对用来生成Statement的Sql语句下手。在Mybatis中Statement语句是通过RoutingStatementHandler对象的
prepare方法生成的。所以利用拦截器实现Mybatis分页的一个思路就是拦截StatementHandler接口的prepare方法，然后在拦截器方法中把Sql语句改成对应的分页查询Sql语句，之后再调用
StatementHandler对象的prepare方法，即调用invocation.proceed()。
对于分页而言，在拦截器里面我们还需要做的一个操作就是统计满足当前条件的记录一共有多少，这是通过获取到了原始的Sql语句后，把它改为对应的统计语句再利用Mybatis封装好的参数和设
置参数的功能把Sql语句中的参数进行替换，之后再执行查询记录数的Sql语句进行总记录数的统计。

上图是，mybatis 分页插件配置。

PageInterceptor 就是，分页插件实现的具体util类。

PageInfo 类，是 分页查询，需要的参数类，其中包含 分页查询等等所必须的信息。

下图是mapper.xml 中，分页查询的方法代码：

上面提到PageInterceptor 类，会拦截所有的查询方法。在intercept 方法，第 61到 65行代码可以看出，拦截所有查询方法之后，会判断查询的 当前查询绑定的参数对象，是否是 pageInfo 。如果是，则会根据pageInfo 的 分页信息 拼接sql ，查询需要的结果。

***********************后台分页查询数据介绍end*****************************

下面说一下，easyui 前端页面分页。

其实前端easyui 的datagrid 分页就很简单了，datagrid自己就支持分页功能。

代码如下：

$(function() {
        dataGrid = $('#dataGrid').datagrid({
            url : '${path}/pages/dbconn/dataGrid',
            striped : true,
            rownumbers : true,
            pagination : true,
            singleSelect : true,
            idField : 'id',
            sortName : 'createDate',//id
            sortOrder : 'desc',
            fit : true,
            fitColumns : true,
            fix : false,
            autoRowHeight : false,
          	//onClickCell:function(){}
            pageSize : 20,
            pageList : [ 10, 20, 30, 40, 50, 100, 200, 300, 400, 500 ],
            columns: [[
			{ 
			   field : 'ck', checkbox : true
			},
			{
                width : '10%',
                title : '主键',
                field : 'id',
                sortable : true,
                align : 'center',
            	hidden : true
            }, 
            {
                width : '10%',
                title : '数据库名称',
                field : 'dbname',
                sortable : false,
                align : 'center',
                hidden : false,
            } , 
            {
                field : 'action',
                title : '操作',
                width : 200,
                align : 'center',
                formatter : function(value, row, index) {
                    var str = '';
                    str += $.formatString('<a href="javascript:void(0)" data-row="edit_{0}" class="dbconn-easyui-linkbutton-edit" data-options="plain:true,iconCls:\'icon-dc-del\'" onclick="editFun(\'{1}\',\'{2}\');" >编辑</a>', index, row.id, index);
					str += '|';
					str += $.formatString('<a href="javascript:void(0)" data-row="del_{0}" class="dbconn-easyui-linkbutton-del" data-options="plain:true,iconCls:\'icon-dc-del\'" onclick="deleteFun(\'{1}\',\'{2}\');" >删除</a>', index, row.id, index);
					str += '|';
					str += $.formatString('<a href="javascript:void(0)" data-row="conn_{0}" class="dbconn-easyui-linkbutton-conn" data-options="plain:true,iconCls:\'icon-dc-del\'" onclick="connect(\'{1}\');" >测试连接</a>', index, row.id);
					return str;
                }
            } 
			]],
            onLoadSuccess:function(data){
                $('.dbconn-easyui-linkbutton-edit').linkbutton({text:'更改',plain:true,iconCls:'icon-dc-edit'});
                $('.dbconn-easyui-linkbutton-del').linkbutton({text:'删除',plain:true,iconCls:'icon-dc-del'});
                $('.dbconn-easyui-linkbutton-conn').linkbutton({text:'测试连接',plain:true,iconCls:'icon-dc-home'});
            },
            toolbar : '#toolbar'
        });
    });

上面代码所在文件夹，如图下。

上面代码中，url : '${path}/pages/dbconn/dataGrid', 就是说，当前 table 的数据，是从/pages/dbconn/dataGrid 这个方法中获取的。这个方法的代码，如图下：

查询需要的四个参数，page ,rows ,sort ,order 。均在 .datagrid 封装方法中 。

页面展示如图下：

更改每页显示数量为300 后，在controller 中断点查看数据如图下：

that all

可能某些地方介绍的优点模糊，不算很明确。个人水平有限，请见谅，如果有啥疑问，可以 到 github 下载代码运行之后，照着 项目看博客文档。如果还有疑问，欢迎联系本人

QQ：1286238812

design github :https://github.com/wenhaoran/design