主要在前端页面加：
<div> 搜索ID： <div> <input autocomplete="off"> </div> <span> <select> <option value="userid" selected="selected">userid</option> <option value="content" >content</option> </select> </span> <button data-type="reload">搜索</button> </div>
在js中加上：
reload:function () { var keyWord=$("#keyWord").val(); var keyType=$("#key_type option:selected").val(); table.reload('contenttable',{ method:'post', where:{keyWord:keyWord,keyType:keyType} }); }
js的全貌：
<script> layui.use('table', function(){ var table = layui.table; //渲染 table.render({ elem: '#test' //绑定table表格 ,height: 450 ,url: '<%=request.getContextPath()%>/admin/backContent' //后台springmvc接收路径 ,page:true //true表示分页 ,limit: 10 ,id:'contenttable' ,toolbar: '#toolbarDemo' ,cols: [[ {type: 'checkbox', fixed: 'left'} ,{field:'id', title:'id', width:80, fixed: 'left', unresize: true, sort: true} ,{field:'content', title:'内容', width:120} ,{field:'userid', title:'用户id', width:80, sort: true} ,{field:'nice', title:'点赞数', width:100} ,{field:'createtime', title:'分享时间', width:80, sort: true} ,{field:'pic1', title:'图片1', width:120,templet:'<div><img src="http://localhost:8089/SharedImageServer/contentpic/{{ d.pic1}}"></div>'} ,{field:'pic2', title:'图片2', width:120,templet:'<div><img src="http://localhost:8089/SharedImageServer/contentpic/{{ d.pic2}}"></div>'} ,{field:'pic3', title:'图片3', width:120,templet:'<div><img src="http://localhost:8089/SharedImageServer/contentpic/{{ d.pic3}}"></div>'} ]] }); //监听表格行点击 table.on('tr', function(obj){ console.log(obj) }); //监听表格复选框选择 table.on('checkbox(test)', function(obj){ console.log(obj) }); //监听表格单选框选择 table.on('radio(test2)', function(obj){ console.log(obj) }); //监听单元格编辑 table.on('edit(test2)', function(obj){ var value = obj.value //得到修改后的值 ,data = obj.data //得到所在行所有键值 ,field = obj.field; //得到字段 }); //监听工具条 table.on('tool(test)', function(obj){ var data = obj.data; if(obj.event === 'del'){ layer.confirm('真的删除行么', function(index){ obj.del(); layer.close(index); }); } else if(obj.event === 'edit'){ layer.prompt({ formType: 2 ,value: data.username }, function(value, index){ obj.update({ username: value }); layer.close(index); }); } }); var $ = layui.jquery, active = { getCheckData: function(){//获取选中数据 var checkStatus = table.checkStatus('contenttable') ,data = checkStatus.data; layer.alert(JSON.stringify(data)); } ,getCheckLength: function(){//获取选中数目 var checkStatus = table.checkStatus('contenttable') ,data = checkStatus.data; layer.msg('选中了：'+ data.length + ' 个'); } ,isAll: function(){//验证是否全选 var checkStatus = table.checkStatus('contenttable'); layer.msg(checkStatus.isAll ? '全选': '未全选') } ,parseTable: function(){ table.init('parse-table-demo', { limit: 3 }); } ,add: function(){ table.addRow('test') } ,delete: function(){ layer.confirm('确认删除吗？', function(index){ table.deleteRow('test') layer.close(index); }); } ,reload:function () { var keyWord=$("#keyWord").val(); var keyType=$("#key_type option:selected").val(); table.reload('contenttable',{ method:'post', where:{keyWord:keyWord,keyType:keyType} }); } }; $('i').on('click', function(){ var type = $(this).data('type'); active[type] ? active[type].call(this) : ''; }); $('.layui-btn').on('click', function(){ var type = $(this).data('type'); active[type] ? active[type].call(this) : ''; }); }); </script>
通过reroad重载把参数传到springmvc后台进行模糊查询，再把查到的数据返回就好了。
其中springmvc控制层代码：
/** * layui-content后台代码 * @return */ @RequestMapping(value = "/backContent") @ResponseBody public ResultMap<List<Content>> backContent(Page page, @RequestParam("limit") int limit){ page.setRows(limit); List<Content>contentList=contentService.selectPageList(page); int totals=contentService.selectPageCount(page); page.setTotalRecord(totals); return new ResultMap<List<Content>>(0,"",totals,contentList); }
因为layui返回的参数不单单是json数组，要符号其的数据格式才能在jsp页面显示数据，所以用ResultMap类来处理返回数据的格式。
package net.stxy.one.model; /** * * layui数据表格返回数据处理类 * Created by ASUS on 2018/5/19 * * @Authod Grey Wolf */ public class ResultMap<T> { private String msg; private T data; private int code; private int count; public String getMsg() { return msg; } public void setMsg(String msg) { this.msg = msg; } public T getData() { return data; } public void setData(T data) { this.data = data; } public int getCode() { return code; } public void setCode(int code) { this.code = code; } public int getCount() { return count; } public void setCount(int count) { this.count = count; } public ResultMap(int code,String msg, int count,T data) { this.code = code; this.msg = msg; this.count = count; this.data = data; } public ResultMap() { } }
其中mapper的语句：