layui的数据表格+springmvc实现搜索功能
没有用过layui可以看看: 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:'c