1. 프론트엔드 부분
html에는 ID가 있는 div만 넣으면 됩니다. 이는 js가 렌더링 영역을 얻는 데 편리합니다.
<div id="data_grid" lay-filter="demo" ></div>
js 부분에서는 URL에 주의해야 합니다. 비동기 데이터 인터페이스로 테이블을 렌더링한 후 콜백 함수가 완료되었습니다
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 });
조건에 따라 쿼리하면 테이블이 비동기식으로 새로 고쳐집니다. 첨부된 매개변수는 어디에 있습니까
$('#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(); } }) } }); });
에서 버튼을 정의하세요. 2. 서버 부분
컨트롤러 레이어에서는 다음과 같은 매개변수, 페이지, 제한, 조건을 받아야 합니다. 쿼리하면 반환 값은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; }
서비스 레이어에서 제공하는 기본 반환 값을 기반으로 합니다. Query 및 paginate
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 리버스 엔지니어링으로 생성된 예제에는 제한 및 페이지가 없으므로 주의하세요. 직접 추가해야 합니다
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지식을 보려면 PHP 중국어 웹사이트layui 튜토리얼칼럼
을 주목하세요.위 내용은 Layui의 데이터 테이블 및 페이징 구현 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!