在做考勤系统的时候，需要将多条件查询的结果显示在同页面的table中，不用跳转页面。下面是效果图
输入条件点击查询异步加载出数据库的内容。
1.写好html前台代码
这里就是一个table的样式。
<div id="text2"><table class="ui nine column table celled table-result"id="table-result" data-toggle="table"><thead><tr><th style = "width :60px">工号</th><th style = "width :60px">姓名</th><th style = "width :60px">入职时间</th><th style = "width :60px">状态</th><th style = "width :60px">备注</th><th style = "width :60px">入职时间</th></tr></thead><tbody id="text1">//最重要，这是后面ajax获取的id</tbody></table></div>
2.写好前端代码，下面来写js
function s1(){ var start = $("#starttime").val();var finalt = $("#finaltime").val();var userstate = document.getElementById("userstate").value;var user = $("#user").val();alert(finalt);$.ajax({ type: "POST", //提交方式dataType: "json", //数据格式设置url: "UserSearch", //数据处理页面data: { user:user, start : start,finalt : finalt,userstate : userstate}, success: function (msg) { //成功时的回调函数$("#text1").html("");//清除之前所生成的tr,不然再次查询会追加到原来的表格中$(msg).each(function (i, values) {//$(".t").remove();$("#text1").append( //这里就是将前端tbody text1 加载内容"<tr><td style = 'width :60px'>"+values.uid+"</td>"+"<td style = 'width :60px'>"+values.uname+"</td>"+"<td style = 'width :60px' >"+values.uworktime+"</td>"+"<td style = 'width :60px' >"+values.ustate+"</td>"+"<td style = 'width :60px' >"+values.unote+"</td>"+"<td style = 'width :60px' >"+values.utime+"</td></tr>");});}, error: function () { alert("查询失败") } }); }
3.触发这个事件的button代码
<input type="button" id="searchs" value="查询" onclick="s1();fomrReset()"class="btn btn-primary btn-lg active"style="margin-left: 150px; margin-right: 30px;"></input>
关键代码就是onclick = “s1()”
Servlet处理代码
request.setCharacterEncoding("utf-8");response.setContentType("text/html;charset=UTF-8");PrintWriter out = response.getWriter();String user = request.getParameter("user");String userstate = request.getParameter("userstate");String start = request.getParameter("start");String finaltime = request.getParameter("finalt");System.out.print(finaltime);//user = URLDecoder.decode(user,"utf-8");//userstate = URLDecoder.decode(userstate,"utf-8");//start = URLDecoder.decode(start,"utf-8");//finaltime = URLDecoder.decode(finaltime,"utf-8");//多条件查询String sql = "select userinform.uid,userinform.uname,uworktime,ustate,unote,utime from note,userinform where note.uid = userinform.uid ";if(user!=null && !user.equals("")){sql += "and userinform.uname like '%"+user+"%'";}if(userstate!=null && !userstate.equals("")) {sql += "and ustate like '%"+userstate+"%'";}if(start!=null && !start.equals("") && finaltime != null && !finaltime.equals("") ) {sql +=" and date_format(utime,'%Y-%m-%d') BETWEEN str_to_date('"+start+"', '%Y-%m-%d') AND str_to_date('"+finaltime+"', '%Y-%m-%d')";}sql +="order by utime desc,uid asc";//request.setAttribute("sql", sql);//request.getRequestDispatcher("usershow.jsp").forward(request, response);//Caozuo caozuo = new Caozuo();List<userAllInform> lists = caozuo.workshow(sql);ObjectMapper mapper = new ObjectMapper(); //将lists集合转换成json格式传递到前端界面mapper.writeValue(response.getWriter(), lists);
关键代码就是最后两句将查询到的lists集合转换成json格式输出到前端
共同努力
