servlet实现layui的搜索功能_layui 搜索 type—

本文链接：https://blog.csdn.net/weixin_52994410/article/details/125555189

一、首先根据layui的布局，将搜索框布局在layui的上部工具栏中

效果图：

二、导入layui的表格，可以实现分页等功能，这里不做详细说明，详情请看

layui实现数据展示_徒醉了清风l的博客-CSDN博客_layui显示

分页可看

layui实现分页_徒醉了清风l的博客-CSDN博客_layui 分页

三、为layui的表格赋予一个id

四、编写方法进行相应的查询

前端代码

<script type="text/html" id="toolbarDemo">
 <div class="demoTable">
 用户名：
 <div class="layui-inline">
 <input class="layui-input" name="keyword" id="demoReload" autocomplete="off">
 </div>
 <button class="layui-btn" data-type="reload" id="search">搜索</button>
</div>
</script>

在layui表格设置id

,id: 'testReload'

相应的js

 $('#search').click(function () {
	  var user_name = $('#demoReload').val()
	  table.reload('testReload', {
	  url: 'usersearchist'
	 // ,methods:"post"
	  ,request: {
		  pageName: 'page' //页码的参数名称，默认：page
		,limitName: 'limit' //每页数据量的参数名，默认：limit
	  }
	  ,where: {
		  user_name : user_name  //搜索的字段
	  }
	  ,page: {
	   curr: 1   //从第几页开始，这里是从第一页开始
	  }
	  
	 })
	 })