一.前端部分
html只需要放一个有id的div就行了，方便js获取渲染区域
<div id="data_grid" lay-filter="demo" ></div>
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里定义好按钮
<script type="text/html" id="bardemo"> <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="add">增加</a> <a class="layui-btn layui-btn-xs" lay-event="detail">查看</a> <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a> <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a> <!-- 这里同样支持 laytpl 语法，如： --> {{# if(d.auth > 2){ }} <a class="layui-btn layui-btn-xs" lay-event="check">审核</a> {{# } }}</script>
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<mguser> 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<mguser> 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 list<mguser> getuserlist(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<mguser> 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,需要加上分页条件
<select id="selectbyexample" resultmap="baseresultmap" parametertype="com.wang.entity.mguserexample" > select <if test="distinct" > distinct </if> <include refid="base_column_list" /> from mg_user <if test="_parameter != null" > <include refid="example_where_clause" /> </if> <if test="orderbyclause != null" > order by ${orderbyclause} </if> <if test="start !=0 or limit!=0"> limit #{start},#{limit} </if> </select>
本文转自：https://www.cnblogs.com/wangxiayun/p/9145638.html
更多layui知识请关注layui教程栏目
以上就是layui实现数据表格及分页的方法的详细内容。