layui的table组件,实现分页。
常用的分页方式:前端每跳转至一个分页,就会发送一个分页请求,后台将该页的数据查询到,然后返回给前端,前端获取数据再显示。(分页不是说后台将全部的数据查询到,然后全部传给前端,而是前端要显示哪一页,再去向后台请求哪一页的数据,后台再返回给前端。)
web前端框架有很多,这些框架的列表分页多少会有些不同,但是还是会有相同的部分(关键部分):分页的重要元素。
重要元素:当前页码(第几页)、每页大小(能显示多少条数据)、总数据条数。
本文讲的是Layui前端框架的分页。
下面介绍列表分页的基本实现,若要了解列表更多的样式和功能,官方资料地址:https://www.layui.com/doc/modules/table.html
html中表格
这里只是定义了表格,具体表格的渲染交给js完成。
<table id="billList" class="layui-table" lay-even lay-filter="test"></table>
js文件中
table的渲染中除了如下代码里的各种元素外,比如id、width,url等等,还有一些元素(参考官方地址)。
每次分页请求都会是 url: /bill/billList 请求参数是pageNumber(页码) 和 pageLimit(页大小)。
说一下:autoSort: true。 自动排序,所谓自动排序,就是前端来排序,排序规则就是:如果是数值,那就按大小排序,如果是字母,那就按a~Z 顺序来排。
autoSort: false。 就是禁止自动排序,此时要想排序,就只能发送相关参数给后台,后台按照排序来查询数据,返回排好序的数据给layui显示,以此达到排序的效果,那么就需要在js文件里 添加排序的代码,代码的作用是:获取要排序的字段名,排序方式(举个例,升序,降序,还是某种序,反正就是个名字标识,后台代码能够相应的识别就行),重新加载表格。
var table = layui.table;
//执行渲染
table.render({
elem: '#billList' //指定原始表格元素选择器(推荐id选择器)
,id: 'list'
,height: 523 //容器高度
,width:1200
,cols: [[
{title:'账单编码', field:'orderCode', fixed:'left', sort:'true'}
,{title:'商品名称', field:'goodsName'}
,{title:'供应商', field:'supplierName'}
,{title:'账单金额', field:'sum', sort:'true'}
,{title:'是否付款', field:'isPay'}
,{title:'创建时间', field:'optt', sort:'true'}
,{title:'操作人', field:'optp'}
,{title:'操作', fixed:'right'}
]] //设置表头
,url: '/bill/billList'
,method: 'post'
,page: {
first: '1'
,limit: '4'
,limits: [4,8]
}
,loading: true
,text:{
none: '数据为空'
}
,request:{
pageName: 'pageNumber'
,limitName: 'pageLimit'
}
,autoSort: true //点击列的表头排序符,false,前端就不会去排序了,而是table.on的方法去请求后台返回排好序的数据,然后直接显示,true时,那么前端就会自动
//去排序,不需要请求后台了,当需要复杂排序时,可用后台,简单排序,前台足够了
});
后台controller层代码如下:
PageData类是自定义的一个封装类,用于接收pageNumber 和 pageLimit参数。 返回值 是 ResultData<T> 类型的值。
@Controller
@RequestMapping("/bill")
public class BillController extends BaseController {
@Autowired
public BillService billService;
@RequestMapping(value = "/billList", method = RequestMethod.POST)
@ResponseBody
public ResultData<List<TOrders>> findList(PageData pageDate){
System.out.println("hello start");
return billService.findList(pageDate);
}
}
ResultData<T> 的代码如下: 为什么ResultData<T> 要如此定义呢 ?不是随便定义的,是根据layui框架需要返回的参数而定的,如果不这么定义,那么layui无法解析后台返回的数据,那也就无法正确的分页了(甚至无法分页)。
code是状态,成功还是失败。
msg是信息。
count是总记录条数。
data是要显示在列表中的数据。
private int code=0;
private String msg = "";
private int count;
private T data;
pageData类的代码如下:
//请求当前第几页的列表数据
private int pageNumber;
//每一页显示多少条记录
private int pageLimit;
pageDataOfMybatis类代码如下: 为什么要定义这个类呢? 试想,我们拿到“页码”和“页大小”去数据库查询数据,写sql语句 通过limit start, size 关键语句进行查询,意思就是 从第start条开始,往后获取size条记录。那么就需要start (从第几条记录开始)和 size(获取多少条记录) ,而pageData中的pageNumber不能直接用,要转换一下,转换成 pageDataOfMybatis
private int startNum;
private int pageSize;
转换方法:
public static PageDataOfMybatis handle(PageData pageData){
PageDataOfMybatis pageDataOfMybatis = new PageDataOfMybatis();
pageDataOfMybatis.setStartNum((pageData.getPageNumber()-1)*pageData.getPageLimit());
pageDataOfMybatis.setPageSize(pageData.getPageLimit());
return pageDataOfMybatis;
}
好,基本处理完了!还有最后一点点
将pageDataOfMybatis作为参数,去执行sql语句,sql语句根据自己的业务,自己写吧。
要写两个sql,一个sql查询列表要显示的数据,另一sql查询总记录数。
查询到了之后,封装成一个ResultData<T> 对象,通过controller层返回给前端,layui就一定能正确地显示出来了。
展示一下demo结果: