layui怎么实现数据表格并分页
一.前端部分
创新互联从2013年开始，先为镇康等服务建站，镇康等地企业，进行企业商务咨询服务。为镇康企业网站制作PC+手机+微官网三网同步一站式服务解决您的所有建站问题。
html只需要放一个有id的div就行了，方便js获取渲染区域
js部分需要注意url为异步数据接口,done是渲染完表格之后的回调函数
table.render({
elem: '#data_grid'
//,width: 900
//,height: 274
,cols: [[ //标题栏
{field: 'id', title: 'ID', width: 80, sort: true}
,{field: 'username', title:'用户名',width: 100} //空列
,{field: 'password', title: '密码', width: 120}
,{field: 'gender', title: '性别', width: 150}
,{field: 'nichen', title: '昵称', width: 150}
,{field: 'birthday', title: '出生年月', width: 120}
,{fixed: 'right', width: 215,align:'center', toolbar: '#barDemo'}
]]
,url:url
,skin: 'row' //表格风格
,even: true
,page: true //是否显示分页
,limits: [3,5,10]
,limit: 5 //每页默认显示的数量
,done:function(res){
userPage.data = res.data;
}
//,loading: false //请求数据时，是否显示loading
}); 根据条件查询，表格异步刷新，where为附带参数
$('#sub_query_form').on('click',function () {
var queryPo = page.formToJson($('#query_form').serialize());
var table = layui.table;
table.reload('data_grid', {
url: '/getUserList.action',
page:{
curr:1 //从第一页开始
},
method:'post',
where:{
queryStr:queryPo
},
done:function (res) {
userPage.data = res.data;
}
});
}); 将x-www-form-urlencoded转化为json字符串
formToJson:function (data) {
data=data.replace(/&/g,"\",\"");
data=data.replace(/=/g,"\":\"");
data="{\""+data+"\"}";
return data;
}表格工具栏使用
1.首先在html里定义好按钮
2.js内引用
layui.use('table', function(){
var table = layui.table;
userPage.tab('/getUserList.action');
//监听工具条
table.on('tool(demo)', function(obj){
var data = obj.data;
userPage.data = obj.data;
if(obj.event === 'detail'){
layer.msg('ID：'+ data.id + ' 的查看操作');
}
else if(obj.event === 'del'){
layer.confirm('真的要删除这条记录么',{icon: 3, title:'确定删除'}, function(index){
obj.del();
$.post('/doDelete.action?id='+data.id,function (res) {
userPage.reload(res);
});
layer.close(index);
});
}
else if(obj.event === 'add'){
layer.open({
title:'增加窗口',
content:userPage.template,
yes:function () {
var user = page.formToJson($('#layer_form').serialize());
var data = 'user='+user;
$.post('/doAdd.action',data,function (res) {
userPage.reload(res);
});
layer.closeAll();
}
})
}
else if(obj.event === 'edit'){
layer.open({
title:'编辑窗口',
content:userPage.template,
success:function () {
$('input[name="id"]').val(userPage.data.id);
$('input[name="username"]').val(userPage.data.username);
$('input[name="password"]').val(userPage.data.password);
$('input[name="gender"]').val(userPage.data.gender);
$('input[name="nichen"]').val(userPage.data.nichen);
$('input[name="birthday"]').val(userPage.data.birthday);
},
yes: function(){
var mgUser = page.formToJson($('#layer_form').serialize());
var data = 'user='+mgUser;
$.post('/doEdit.action',data,function (res) {
userPage.reload(res);
});
layer.closeAll();
}
})
}
});
});二.服务端部分
Controller层需要接收以下参数，page,limit,要查询的条件，返回值根据layui文档给出的默认返回值
@RequestMapping("/getUserList")
@ResponseBody
public PageList getUserList(@RequestParam(required = false,defaultValue = "1") int page,@RequestParam(required = false,defaultValue = "5") int limit,@RequestParam(required = false) String queryStr){
QueryPo queryPo = null;
if (!StringUtils.isEmpty(queryStr)){ //性别类型转换
queryPo = JSONObject.parseObject(queryStr,QueryPo.class);
if ("1".equals(queryPo.getGender())){
queryPo.setGender("男");
}
if ("2".equals(queryPo.getGender())){
queryPo.setGender("女");
}
}
PageList pageList = new PageList();
try {
if (!StringUtils.isEmpty(queryPo)){ //中文字转码
if(!StringUtils.isEmpty(queryPo.getKeywords())){
queryPo.setKeywords(URLDecoder.decode(queryPo.getKeywords(),"utf-8"));
}
}
List userList = userService.getUserList(page,limit,queryPo); //根据条件查询分页数据
pageList.setCode("0");
pageList.setMsg("ok");
pageList.setData(userList);
int count = userService.countUserByExample(queryPo);
pageList.setCount(count);
} catch (UnsupportedEncodingException e) {
e.printStackTrace();
pageList.setCode("-1");
pageList.setMsg("数据获取异常");
return pageList;
}
return pageList;
} Service层根据条件查询并分页
public ListgetUserList(int page , int limit, QueryPo queryPo) { MgUserExample userExample = new MgUserExample(); MgUserExample.Criteria criteria = userExample.createCriteria(); if(!StringUtils.isEmpty(queryPo)){ if (!StringUtils.isEmpty(queryPo.getGender())){ criteria.andGenderEqualTo(queryPo.getGender()); } if (!StringUtils.isEmpty(queryPo.getKeywords())){ criteria.andUsernameLike("%"+queryPo.getKeywords()+"%"); } } userExample.setStart((page-1)*limit); userExample.setLimit(limit); List mgUsers = userMapper.selectByExample(userExample); return mgUsers; }
注意由于mybatis逆向工程生成的Example没有limit和page，所以需要自己加上
private int start;
private int limit;
public int getStart() {
return start;
}
public void setStart(int start) {
this.start = start;
}
public int getLimit() {
return limit;
}
public void setLimit(int limit) {
this.limit = limit;
}接着修改Mybatis的mapper.xml,需要加上分页条件
以上就是layui实现数据表格及分页的方法的详细内容，更多请关注创新互联其它相关文章！
当前标题：layui怎么实现数据表格并分页
转载注明：http://6mz.cn/article/popopc.html