layui的数据表格+springmvc实现搜索功能的例子
(编辑:jimmy 日期: 2024/11/27 浏览:3 次 )
如下所示:
主要在前端页面加:
<div class="demoTable"> 搜索ID: <div class="layui-inline"> <input class="layui-input" name="keyWord" id="keyWord" autocomplete="off"> </div> <span class="input-group-btn"> <select name="keyType" id="key_type" class="layui-btn"> <option value="userid" selected="selected">userid</option> <option value="content" >content</option> </select> </span> <button class="layui-btn" 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="/UploadFiles/2021-04-02/{{ d.pic1}}">/** * 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的语句:
<!-- 通过条件分页查询,返回数据集 --> <select id="selectPageList" parameterType="net.stxy.one.model.Page" resultMap="BaseResultMap" > select <include refid="Base_Column_List" /> from content <where> <if test="keyWord!='' and keyType=='userid' "> AND userid like '%' #{keyWord} '%' </if> <if test="keyWord!='' and keyType=='content' "> AND content like '%' #{keyWord} '%' </if> </where> order by id DESC limit #{start},#{rows} </select> <!-- 通过条件分页查询,返回总记录数 --> <select id="selectPageCount" parameterType="net.stxy.one.model.Page" resultType="java.lang.Integer"> select count(1) from content <where> <if test="keyWord!='' and keyType=='userid' "> AND userid like '%' #{keyWord} '%' </if> <if test="keyWord!='' and keyType=='content' "> AND content like '%' #{keyWord} '%' </if> </where> </select>以上这篇layui的数据表格+springmvc实现搜索功能的例子就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。
下一篇:layui下拉列表select实现可输入查找的方法