分页是一个很常用的东西，今天就用Mybatis+elementUI实现分页实现了一下分页。
html:
事件解释
@size-change：当每页显示的条数发生改变是触发，即：原先显示5条/页，现在改成了10条/页
如图：
@current-change：当前页码改变时触发的函数，即你点击 1 ， 2 ， 3 ，它就跳到相应的数据页
:page-sizes：上图中的每页显示的条数2/4/6/8/10的选项设置，这些2,4,6…其实是在:page-sizes属性中定义的。
:page-size：每页显示的数据的条数。当我们点击@size-change事件，然后从:page-sizes中选择相应的条数，element会将我们选中的条数赋值给属性:page-size，然后去后台查询数据。
:total 分页导航中显示的总条数。是在后台查询数据后才赋值的
layout：表示需要显示的内容，用逗号分隔，布局元素会依次显示。prev表示上一页，next为下一页，pager表示页码列表，除此以外还提供了jumper和total，size和特殊的布局符号->，->后的元素会靠右显示，jumper表示跳页元素
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:page-sizes="pagination.pageSizes"
:page-size="pagination.pageSize"
:total="pagination.total"
layout="total, sizes, prev, pager, next, jumper"
>
</el-pagination>js代码：
解释：
pagination：因为el-pagination需要很多的参数去初始化控件本身，即total、:page-size、：page-sizes等。所以我们就把这些零散的参数封装到一个对象里。
queryParam：用来携带查询条件的
区别：pagination是用来初始化控件，或者根据后台返回的数据，给控件的参数进行赋值，来显示总共多少条记录，一共显示多少页等等，具体的表现为分页导航条的显示。总之它是和控件本身打交道的。
queryParam是用来查询的，因为我们查询的时候可能要有多个参数，比如点击 4条/页，或者直接点击页码，又或者直接输入页码等，我们总要将这些参数传给后台。那干脆直接把它们封装到对象里，一起发送给后台。所以在点击页数，或者选择每页显示的条数的时候，要将该值赋值给queryParam中相应的字段，然后再发送给后台。
handleSizeChange：上面已经解释过了，当页面显示条数变化时被触发，此时我们将查询条件赋值给queryParam，之后进行查询，就是带着查询条件，重新执行得到数据的请求。
handleCurrentChange：与handleSizeChange，不赘述。
注：handleSizeChange与handleCurrentChange触发是，都是将查询条件的值赋值给queryParam，切莫赋值给pagination，原因上面已经讲得很清楚了。具体代码如下所示
<script type="text/javascript">
var app = new Vue({
el:'#app',
data:{
userList:[],
pagination:{
total:0,
pageSize:2,
pageSizes:[2,4,6,8,10],
},
queryParam:{
pageSize:2,
pageNumber:1,
}
},
methods:{
pageUserList:function () {
$.ajax({
type:"post",
url:"/customer/pageData.do",
dateType:"json",
contentType : 'application/json',
data:JSON.stringify(this.queryParam),
success:function(result){
app.userList=result.rows;
app.pagination.total=result.total;
// 重新加载数据，即重新请求数据，并加载
console.log(app.userList);
// data:JSON.stringify(this.queryParam),
// 因为对象是不能在网络中传输的，（Json对象也是对象），所以这里要将json对象转换成json字符串
// 然后再传输，后台的springmvc的@RequesyBody会将json字符串再转换成对象
//这个地方尤其要注意一定要指定contentType的值为『"application/json"』 ，因为此处@RequestBody接受的是一个通过json转换的对象
//如果不设置，默认为text/html,那么是支持该种类型的，会报415错误
}
});
},
// 这里一点击翻页就会重新去查询数据，所以这里因该是给查询条件赋值，而不是给pagination赋值
// 后台我们已经将数据分号了页，pagination会自根据后台返回的分页数据给自己的属性变量赋值
handleSizeChange:function(pageSize){
// 这里当我们点击第几条第几页的时候，控件会将这些值绑定到控件的属性里，此时这些属性已经有值了
// ，然后在每个属性相对应的change方法
// 里我们又将该属性传递给了条件查询参数queryParam,于是，后台进行查询，得到结果，
// 此时控件的所有属性都只剩下，total没有重新赋值了，我们再将结果赋值给控件的total
// 总条数
app.queryParam.pageSize=pageSize;
this.pageUserList();
},
// 当前的页码，改变时会触发
handleCurrentChange:function (currentPage) {
app.queryParam.pageNumber=currentPage;
this.pageUserList();
}
},
created:function () {
this.pageUserList();
},
});
</script>controller:这里遇见了415的问题请看我的上一篇播客：
https://blog.csdn.net/java_xxxx/article/details/81163432
@RequestMapping("/customer/pageData.do")
@ResponseBody
public MyPage pageData(@RequestBody MyPage myPage){
System.out.println(myPage.getPageSize()+"===="+myPage.getPageNumber());
return customerService.pageData(myPage);
}
service:
注：这里出现了bug:
java.lang.ClassCastException: java.util.ArrayList cannot be cast to com.github.pagehelper.Page.
bug出现在这一行
com.github.pagehelper.Page<Customer> page = (com.github.pagehelper.Page<Customer>) customerDao.getCustomreList();原因是我导入的mavenjar包，但是却没有在mybatis里面配置分页信息，加入以下配置
<!-- mybatis和spring完美整合，不需要mybatis的配置映射文件 -->
<bean id="sqlSessionFactory" class="org.mybatis.spring.SqlSessionFactoryBean">
<property name="dataSource" ref="dataSource"/>
<!-- 自动扫描mapping.xml文件 -->
<!-- <property name="mapperLocations" value="classpath:mapping"></property>-->
<!-- 配置pojo别名 -->
<property name="typeAliasesPackage" value="com.mingtai.mavenweb.entity"></property>
<property name="plugins">
<array>
<!-- <bean class="com.github.pagehelper.PaginationInterceptor">-->
<bean class="com.github.pagehelper.PageHelper"> <!--分页配置-->
<property name="properties">
<value>
helperDialect=mysql <!--设置数据库类型-->
</value>
</property>
</bean>
</array>
</property>
</bean>jar包
<dependency>
<groupId>com.github.pagehelper</groupId>
<artifactId>pagehelper</artifactId>
<version>4.0.0</version>
</dependency> public MyPage pageData(MyPage myPage) {
// 该函数只对紧挨着它的下一条查询语句起作用
PageHelper.startPage(myPage.getPageNumber(),myPage.getPageSize()); // 设置开始页码，和每页大下，这是分页的2个必要条件
com.github.pagehelper.Page<Customer> page = (com.github.pagehelper.Page<Customer>) customerDao.getCustomreList();
System.out.println(myPage.getPageNumber()+"++++++++++"+myPage.getPageSize());
return new MyPage(Long.valueOf(page.getTotal()),page.getResult());
}自定义类：
public class MyPage {
public Integer pageSize;
public Integer pageNumber;
public List rows;
public Long total;
public MyPage(Long total ,List rows){
this.total=total;
this.rows=rows;
}
public MyPage(Long total ,List rows,Integer pageSize,Integer pageNumber){
this.total=total;
this.rows=rows;
this.pageSize=pageSize;
this.pageNumber=pageNumber;
}
public MyPage(){
}这里要给构造函数，否则会报异常，最好这3个都给
pageHelper封装的数据格式
因为我们要从后台返回的数据中拿到一些值分别赋值给不同的属性，所以，下面再来探讨以下pageHelper封装的数据格式，
{"pageNumber":null,"pageSize":null,"rows":[{"cust_address":"少陵","cust_create_id":null,"cust_createtime":"2018-07-10 00:00:00","cust_id":206,"cust_industry":null,"cust_level":null,"cust_linkman":null,"cust_mobile":null,"cust_name":"杜甫","cust_phone":null,"cust_source":null,"cust_user_id":null,"cust_zipcode":null}],"total":9}因为ajax返回的数据在回调函数里(success:function(result){})，所以
我们要展示的数据库中的数据在rows里，取值的时候，result.rows，赋值给你定义的变量即可，一般是集合
至于total，也是一样result.total，赋值给自定义变量，这里我们赋值给 app.pagination.total
app.userList=result.rows;
app.pagination.total=result.total;页面用el-table展示数据
<el-table
:data="userList"
style="width: 100%"
:fit="true"
>
<el-table-column
prop="cust_name"
label="姓名"
>
</el-table-column>
<el-table-column
prop="cust_address"
label="地址"
>
</el-table-column>
</el-table>到这里elementUI+mybatis分页就大功告成了！！
可以将el-pagination控件看成是一个类，而控件中的方法和属性，就是类中的方法和属性这样用起来就，理解起来就容易的多。
推荐一个讲解mybatis分页比较好的播客：https://blog.csdn.net/qq_16517483/article/details/72803043