layui-table方法渲染+分页+后端PageInfo实现真正异步分页
先看效果
废话不多说，先上效果。
未查询前：
查询后：
更换每页条数：
后端查询语句：
前端
基本思路：前端采用form表单提交的方式获取一些查询信息（有记录的状态qstatus，开始时间fromDate和结束时间toDate），然后通过jQuery实现表单提交时间的监控，在表单提交事件中使用table.render()根据需要查询的信息发送异步请求到后端获取记录。
form表单：
//工具栏
<script type="text/html" id="toolbarDemo">
<div class="layui-btn-container">
<button class="layui-btn layui-btn-sm" lay-event="answers">回复</button>
<button class="layui-btn layui-btn-sm" lay-event="delete">删除</button>
</div>
</script>
<form class="layui-form">
<div class="layui-form-item">
<div class="layui-input-inline">
<select name="qstatus">
<option value="">请输入状态</option>
<option value="0" selected>未回复</option>
<option value="1">已回复</option>
</select>
</div>
<div class="layui-inline">
<label class="layui-form-label">开始时间：</label>
<div class="layui-input-inline">
<input type="text" name="fromDate" class="layui-input" id="test1" placeholder="yyyy-MM-dd" autocomplete="off">
</div>
</div>
<div class="layui-inline">
<label class="layui-form-label">结束时间：</label>
<div class="layui-input-inline">
<input type="text" name="toDate" class="layui-input" id="test1-1" placeholder="yyyy-MM-dd" autocomplete="off">
</div>
</div>
<div class="layui-inline">
<div class="layui-input-inline">
<button class="layui-btn" type="button" lay-submit lay-filter="query">查询</button>
</div>
</div>
</div>
</form>
表单提交监控事件
$.func = {
formatNestedObj:function(list){
//由于layui无法处理json中嵌套的对象，在这里将我们需要的嵌套对象的属性，变为该对象的属性，
for (var i=0;i<list.length;i++)
{
list[i].uname = list[i].user.uname;
}
return list;
}, //end formatNestedObj
}
form.on('submit(query)', function(data){
var param=data.field;//定义临时变量获取表单提交过来的数据，非json格式
table.render({
elem:'#test'
,url:'${ctx}/question/queryQuestion'
,method:'post'
,contentType:"application/json; charset=utf-8"
,request: {
pageName: 'pageNum' //页码的参数名称，默认：page
,limitName: 'pageSize' //每页数据量的参数名，默认：limit
}
,where:{
qstatus:param.qstatus,
fromDate:param.fromDate,
toDate:param.toDate
}
,parseData: function(res){ //res 即为原始返回的数据
return {
"code": 0, //解析接口状态
"msg": "", //解析提示文本
"count": res.total, //解析数据长度
"data": $.func.formatNestedObj(res.list) //解析数据列表
};
}
,even:true
,page: { //支持传入 laypage 组件的所有参数（某些参数除外，如：jump/elem） - 详见文档
layout: ['limit', 'count', 'prev', 'page', 'next'] //自定义分页布局
,groups: 3 //只显示 3 个连续页码
,first: '首页' //首页
,prev: '上一页'
,next: '下一页'
,last: '尾页' //尾页
,limit:6
,limits:[6,12,18]
}
,cols: [[
{field: 'uname', title: '用户名', width:'10%'}
,{field: 'qtype', title: '类型', width:'10%'}
,{field: 'qdetails', title: '问题详情', width:'45%'}
,{field: 'qdate', title: '添加时间', width:'15%'}
,{field: 'qstatus', title: '是否回复', width: '10%'}
,{fixed: 'right', title:'操作', toolbar: '#toolbarDemo', width:'10%'}
]]
});
});//end form
需要说明的几点：
- 使用request来重新设定curr和limit两个字段的名称分别为pageNum和pageSize，这样做的目的是因为我的后端采用DTO对象接收前端数据，而且保证字段的含义与PageInfo里的字段名称相同；
- 要使用table.render()来实现方法渲染和分页数据异步请求，后端的数据必须满足一定的格式，具体格式可以参见文档，但是我的后端controller直接返回PageInfo对象，和它的格式有一定的差距，所以将数据进行了一定的转换以满足该框架所要求的格式，这里为图方便，状态码与提示文本直接设置为了固定的值；
- 由于我的POJO类中采用了面向对象的方式，里面包含了另一个对象，而且该对象的属性是需要展示的，但是layui并不支持内嵌对象属性的展示，所以使用formatNestedObj()函数将内嵌对象的属性拿到外面来。
后端
DTO对象
public class QuestionQueryDTO {
private Integer qstatus;
@JsonFormat(pattern="yyyy-MM-dd")
private Date fromDate;
//解决json转换时区问题
@JsonFormat(pattern="yyyy-MM-dd")
private Date toDate;
private Integer pageSize;
private Integer pageNum;
//省略的get/set方法
}
controller
@RestController
@RequestMapping("/question")
public class QuestionController {
@Autowired
private QuestionService questionService;
@RequestMapping("/queryQuestion")
public PageInfo<Question> queryQuestion(@RequestBody QuestionQueryDTO questionQueryDTO){
PageInfo<Question> pageInfo = questionService.queryQuestion(questionQueryDTO);
return pageInfo;
}
}
service
@Service("questionService")
public class QuestionServiceImpl implements QuestionService {
@Autowired
private QuestionMapper questionMapper;
@Override
public PageInfo<Question> queryQuestion(QuestionQueryDTO questionQueryDTO) {
PageHelper.startPage(questionQueryDTO.getPageNum(),questionQueryDTO.getPageSize());
List<Question> l = questionMapper.queryQuestion(questionQueryDTO);
PageInfo<Question> page = new PageInfo<>(l);
return page;
}
}