分页是一个很常用的东西,今天就用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表示跳页元素
@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 page = (com.github.pagehelper.Page) customerDao.getCustomreList();
原因是我导入的mavenjar包,但是却没有在mybatis里面配置分页信息,加入以下配置
<bean id="sqlSessionFactory" class="org.mybatis.spring.SqlSessionFactoryBean">
<property name="dataSource" ref="dataSource"/>
<property name="typeAliasesPackage" value="com.mingtai.mavenweb.entity">property>
<property name="plugins">
<array>
<bean class="com.github.pagehelper.PageHelper">
<property name="properties">
<value>
helperDialect=mysql
value>
property>
bean>
array>
property>
bean>
jar包
<dependency>
<groupId>com.github.pagehelpergroupId>
<artifactId>pagehelperartifactId>
<version>4.0.0version>
dependency>
public MyPage pageData(MyPage myPage) {
// 该函数只对紧挨着它的下一条查询语句起作用
PageHelper.startPage(myPage.getPageNumber(),myPage.getPageSize()); // 设置开始页码,和每页大下,这是分页的2个必要条件
com.github.pagehelper.Page page = (com.github.pagehelper.Page) 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