动态添加条件，有并，或、根据你输入的字段以及选择的属性，来进行查询，查询的方式有精确查询、模糊查询。
下面的分页是layui-table实现的，是上一篇实现的。也可以不用，这只是你查出来的数据现实的一个样式而已。
先看效果图：
前端实现代码：（你要是不用layui的话就给查询的点击事件做一个ajax的数据传输，不用里面的table-render）
页面的设计是有一个固定着的查询条件，点击加号可以添加查询条件，第二个输入框的内容是根据你自己的查询条件的实际情况来写的。
思路：设置一个变量k=1，每次点击添加以后，生成一个查询条件，值后k的值自增1，根据k的值有个for循环，你自己可以设置最多可以添加几个查询条件。每次点击添加，出来的查询条件标签是写在添加的点击事件之中的。
查询的时候获取你的文本框的值，存在一个json数组之中，发往你请求的地址。
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <meta name="renderer" content="webkit"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <link rel="stylesheet" href="layui/css/layui.css" media="all"> </head> <body> <!--工具栏--> <!-- 综合查询开始 --> <div class="wrap-container clearfix"> <div class="column-content-detail"> <div class="layui-inline tool-btn"> <button class="layui-btn layui-btn-small layui-btn-normal addBtn" id="add"><i class="layui-icon"></i></button> </div> <div id="addCondition"> <div id='0'> <div class='layui-inline' style="padding-left: 43px"> <select lay-filter='status' id='two0'> <option value='companyname'>机构全称</option> <option value='belongcom'>归口管理单位</option> <option value='belongarea'>所在地域</option> <option value='lawperson'>法人代表</option> <option value='contacts'>联系人</option> <option value='techname'>技术需求名称</option> <option value='keyword'>关键字</option> <option value='money'>拟投入资金总额</option> <option value='subject'>学科分类</option> <option value='domain'>需求技术所属领域</option> <option value='vocation'>需求技术应用行业</option> <option value='office'>管理处室</option> </select> </div> <div class='layui-inline'> <input type='text' id='three0' placeholder='请输入标题' class='layui-input'> </div> <div class='layui-inline'> <select lay-filter='status' id='four0'> <option value='='>精确</option> <option value='like'>模糊</option> </select> </div> </div> </div> <button class="layui-btn layui-btn-normal" lay-submit="search" id="search">查询</button> <br> </div> </div> <!-- 综合查询结束 --> <table class="layui-hide" id="test" lay-filter="test"></table> </body> <script src="layui/layui.js" charset="utf-8"></script> <script src="layui/layui.all.js" charset="utf-8"></script> <script src="js/jquery.min.js" charset="utf-8"></script> <script type="text/javascript"> //综合查询 var k=1; layui.use('table', function(){ var table = layui.table; //第一个实例 table.render({ elem: '#test'//获取存放数据的table容器，即是table的id ,height: 515 ,method:'post' ,cache:false //清除缓存 ,url: 'MessageServlet?method=layuifind' //数据接口，最终传值数据到jsp的方法 ,page: true //开启分页 ,toolbar:false ,cols: [[ //表头 {field: 'companyname', title: '用户名', 300,sort: true} ,{field: 'contacts', title: '联系人', 300,sort: true} ,{field: 'comaddress', title: '地址', 177,sort: true} ]] }); $("#search").click(function(){ //获取文本框的值 //添加默认的查询条件 var conditionnum=k-1; if ($("#three0").val()=="") { alert("第一个文本框输入为空"); return ; } //js的字符串拼接 //var test=$('#three'+hhh+'').val(); //alert(test) var json=[]; //得到加了几个查询的条件 var i=0; for(i;i<=conditionnum;i++){ var jsonobj={}; if (i==0) { jsonobj.one="and"; }else { jsonobj.one=$('#one'+i+'').val(); } jsonobj.two=$('#two'+i+'').val(); jsonobj.three=$('#three'+i+'').val(); jsonobj.four=$('#four'+i+'').val(); json.push(jsonobj); } //转为json格式 var sjson=JSON.stringify(json); //alert(sjson); //初始化数据，如果不用layui的显示结果，不用这个table render table.render({ elem: '#test'//获取存放数据的table容器，即是table的id ,height: 515 ,method:'post' ,cache:false //清除缓存 ,url:"MessageServlet?method=layuisearch"//数据接口，最终返回数据到jsp的方法 ,where:{json:sjson} ,page: true //开启分页 ,toolbar:false ,cols: [[ //表头 {field: 'companyname', title: '用户名', 300,sort: true} ,{field: 'contacts', title: '联系人', 300,sort: true} ,{field: 'comaddress', title: '地址', 177,sort: true} ]] }); }); }); $(function () { //添加条件 $("#add").click(function (){ if(k<=5){ var text="<div id='"+k+"'><div class='layui-inline'>" + " <select lay-filter='status' id='one"+k+"'>" + " <option value='and'>并</option>" + " <option value='or'>或</option>" + " </select>" + " </div>" + " <div class='layui-inline'>" + " <select lay-filter='status' id='two"+k+"'>" + " <option value='companyname'>机构全称</option>" + " <option value='belongcom'>归口管理单位</option>" + " <option value='belongarea'>所在地域</option>" + " <option value='lawperson'>法人代表</option>" + " <option value='contacts'>联系人</option>" + " <option value='techname'>技术需求名称</option>" + " <option value='keyword'>关键字</option>" + " <option value='money'>拟投入资金总额</option>" + " <option value='subject'>学科分类</option>" + " <option value='domain'>需求技术所属领域</option>" + " <option value='vocation'>需求技术应用行业</option>" + " <option value='office'>管理处室</option>"+ " </select>" + " </div>" + " <div class='layui-inline'>" + " <input type='text' id='three"+k+"' placeholder='请输入内容' class='layui-input'>" + " </div>" + " <div class='layui-inline'>" + " <select lay-filter='status' id='four"+k+"'>" + " <option value='='>精确</option>" + " <option value='like'>模糊</option>" + " </select>" + " </div>" $("#addCondition").append(text); k+=1; } }); }) </script> </html>
servlet的设计（自己书写即可)：注意sql语句的拼接
private void layuisearch(HttpServletRequest req, HttpServletResponse resp) throws IOException, ServletException, SQLException { req.setCharacterEncoding("utf-8"); resp.setContentType("text/html;charset=utf-8"); //即是点击事件，获取点击跳转的页数，以及每页需要展示的数据 数目，第一次加载默认为page=1&&limit=10 int page =Integer.parseInt(req.getParameter("page")); int limit =Integer.parseInt(req.getParameter("limit")); //获取传过来的json String json=req.getParameter("json"); //将json字符串转换为json对象 JSONArray jsonArray=JSONArray.fromObject(json); //转换为实体类的list集合 List<type> list=(List<type>) jsonArray.toCollection(jsonArray, type.class); //获取一共有多少个查询限制条件 int limitcount=list.size(); //书写sql语句 String sql="select * from information where id>0"; for (int i = 0; i < limitcount; i++) { //查询语句拼接的时候要注意前三个，and/or 数据库列属性 like/= 在sql语句中是字符串 是不用带引号的 //例如 select * from information where id>0 and companyname like '凌云' if (list.get(i).getFour().equals("like")) { //模糊查询(要注意like要与数据库属性用空格分开啊) sql+=" "+list.get(i).getOne()+" "+list.get(i).getTwo()+" "+list.get(i).getFour()+" '%"+list.get(i).getThree()+"%' "; }else { //精确查询 sql+=" "+list.get(i).getOne()+" "+list.get(i).getTwo()+list.get(i).getFour()+" '"+list.get(i).getThree()+"' "; } } //封装的要传回给前台的数据类 Users r=new Users(); //向前端传回状态码 0为正常状态码 r.setCode(0); r.setMsg("获得数据成功"); //所有的数据数目，并不是单单一页展示的数目 r.setCount(MessageService.getlayuiinfo(page, limit,sql).size()); //传递的数据集 r.setData(MessageService.getlayuiinfo(page, limit,sql)); //加载处理 可有可无，并不影响 delay(); //向前端传递数据并显示 resp.getWriter().print(JsonUtils.toJson(r)); }