您好，登录后才能下订单哦！
密码登录
登录注册
点击 登录注册 即表示同意《亿速云用户服务条款》
这篇文章将为大家详细讲解有关layui的数据表格+springmvc如何实现搜索功能，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。
如下所示：
主要在前端页面加：
<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="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的语句：
<!-- 通过条件分页查询，返回数据集 -->
<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是一款采用自身模块规范编写的前端UI框架，它遵循原生HTML/CSS/JS的书写与组织形式，门槛极低，适合新手，并且它还提供了丰富的内置模块，他们皆可通过模块化的方式按需加载，从核心代码到API的每一处细节都经过精心雕琢，非常适合界面的快速开发，能够作为PC网页端后台系统与前台界面的速成开发方案。
关于“layui的数据表格+springmvc如何实现搜索功能”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识，如果觉得文章不错，请把它分享出去让更多的人看到。
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。