多条件查询无刷新分页
来源：互联网 发布：js中数组map方法 编辑：程序博客网 时间：2024/05/13 22:08
1 此篇博文是在上篇博文“无刷新分页技术 ”的基础上增加了多条件查询功能
2、实现的功能：在main.jsp中分页显示用户信息，输入多个查询条件后分页显示查询出的结果
3 、使用到的工具及环境：
2.1:分页框架：pagination
2.11：需要用到的文件：
【jquery.pagination.js】【pagination.css】
2.2:时间控件：datepicker
2.2.1：需要用到的文件：
2.2.1.1：日期控件必须的css
【1】jquery.ui.core.css
【2】jquery.ui.theme.css
【3】jquery.ui.datepicker.css【显示更小】 或者
jquery.ui.datepicker.min.css【显示更大】
2.2.1.2：日期控件必须的js :
【1】jquery-ui.js
【2】jquery.ui.datepicker.js
2.3：json工具：
【1】json2.js
【2】fastjson-1.1.26-sources.jar
【3】 fastjson-1.1.26.jar
4、实现代码
4.1 main.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%><%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%><%@ include file="/WEB-INF/page/common/common.jsp" %><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>图书商城首页</title><script type="text/javascript" src="${basePath }js/jquery/jquery-1.7.2.min.js"></script><!-- 日期控件必须的css 【1】jquery.ui.core.css 【2】jquery.ui.theme.css 【3】jquery.ui.datepicker.css【显示更小】 jquery.ui.datepicker.min.css【显示更大】 --><link rel="stylesheet" href="${basePath }js/jquery/themes/base/jquery.ui.core.css"><link rel="stylesheet" href="${basePath }js/jquery/themes/base/jquery.ui.theme.css"><!-- 日期控件必须的js :【1】jquery-ui.js 【2】jquery.ui.datepicker.js--><script type="text/javascript" src="${basePath}js/jquery/jquery-ui.js"></script><link rel="stylesheet" href="${basePath }js/jquery/themes/base/jquery.ui.datepicker.css"><link rel="stylesheet" href="${basePath}js/common/page/pagination.css" /><script type="text/javascript" src="${basePath}js/common/page/jquery.pagination.js"></script><script type="text/javascript" src="${basePath}js/jquery/js/datepicker/jquery.ui.datepicker.js"></script><script type="text/javascript" src="${basePath}js/json2.js"></script><script type="text/javascript">var pageIndex = 0; //页面索引初始值 var pageSize = 3; //每页显示条数初始化，修改显示条数，修改这里即可 var searchReq=[]; //将页面查询条件定义为一个对象数组【格式[{}]】（push方法添加对象到数组中）$(document).ready(function(){ InitTable(0,searchReq); $("#startQueryDate").datepicker( { /* 区域化周名为中文 */ dayNamesMin : ["日", "一", "二", "三", "四", "五", "六"], /* 每周从周一开始 */ firstDay : 1, /* 区域化月名为中文习惯 */ monthNames : ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"], /* 月份显示在年后面 */ showMonthAfterYear : true, /* 年份后缀字符 */ yearSuffix : "年", /* 格式化中文日期 （因为月份中已经包含“月”字，所以这里省略） */ //dateFormat : "yy年MMdd日", dateFormat: "yy-mm-dd", onSelect: function(dateText) { setDateRange(dateText); } }); $("#endQueryDate").datepicker( { /* 区域化周名为中文 */ dayNamesMin : ["日", "一", "二", "三", "四", "五", "六"], /* 每周从周一开始 */ firstDay : 1, /* 区域化月名为中文习惯 */ monthNames : ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"], /* 月份显示在年后面 */ showMonthAfterYear : true, /* 年份后缀字符 */ yearSuffix : "年", /* 格式化中文日期 （因为月份中已经包含“月”字，所以这里省略） */ //dateFormat : "yy年MMdd日", dateFormat: "yy-mm-dd", clearStatus: '清除已选日期', closeText: '关闭', beforeShow : function(input) { if (null != $("#startQueryDate").val() && '' != $("#startQueryDate").val()) { setDateRange($("#startQueryDate").val()); } else { $("#endQueryDate").datepicker('option', 'maxDate', null); $("#endQueryDate").datepicker('option', 'minDate', null); } } }); /** * 设定endQueryDate的最大日期和最小日期; */ function setDateRange(dateStr) { //将字符串转换成Date类型;【我不知道这个toDate()方法是哪里的，这里好像没用】 //var date = dateStr.toDate(); var date = new Date(dateStr); //只允许查询往后一个星期内的记录; var month = date.getMonth(); var showDate = date.getDate() + 6; //创建最大日期; var maxDate = new Date(date.getFullYear(), month, showDate); //设为maxDate:endQueryDate的日期最小是maxDate，最大是maxDate（比startQueryDate多6天） //$("#endQueryDate").datepicker('option', 'maxDate', maxDate); //设为null：endQueryDate的日期最小是maxDate，最大日期无限制 $("#endQueryDate").datepicker('option', 'maxDate', null); $("#endQueryDate").datepicker('option', 'minDate', date); }});//Load事件，初始化表格数据，页面索引为0（第一页） //翻页调用 function PageCallback(index, jq) { InitTable(index,searchReq); } //请求数据 function InitTable(pageIndex,searchReq) { //PageCount是总的记录数 var jsonStr = JSON.stringify(searchReq); var PageCount=""; var str=""; $.ajax({ type: "POST", //不要加这句，加了的话，后台获取的pageIndex、pageSize、jsonStr都为空 //contentType: "application/json", url: "${basePath }UserServlet?method=showusers&jsonStr="+jsonStr, //提交到一般处理程序请求数据 async:false, data:{pageIndex:pageIndex+1,pageSize:pageSize}, //提交两个参数：pageIndex(页面索引)，pageSize(显示条数) dataType: "json", //complete:function(){$("#Pagination").show();},//接收数据完毕 success: function(data) { PageCount=data.PageCount; var UserList=data.userList; $.each(UserList,function(i,n) { str+="<tr><td>"+n.userid+"</td><td>"+n.usertype+"</td><td>"+n.loginname+"</td><td>"+n.staticpassword+"</td></tr>"; }); //下面这行必须加上，移除原来的数据，不然所有数据会叠加在一起 $("#Result tr:gt(0)").remove(); //移除Id为Result的表格里的行，从第二行开始（这里根据页面布局不同页变） $("#Result").append(str); //将返回的数据追加到表格 } }); //分页，PageCount是总条目数，这是必选参数，其它参数都是可选 if(PageCount!=0) { $("#Pagination").pagination(PageCount, { callback: PageCallback, prev_text: '上一页', //上一页按钮里text next_text: '下一页', //下一页按钮里text items_per_page: pageSize, //显示条数 num_display_entries: 6, //连续分页主体部分分页条目数 current_page: pageIndex, //当前页索引 num_edge_entries: 2 //两侧首尾分页条目数 }); } } function selectedDate(){ if($("#startQueryDate").val() != null || $("#endQueryDate").val() != null){ $(".chartForm input[name=time]").attr('checked', false); } }; //清空查询条件 var resetForm=function(){ $("#startQueryDate").attr("value",''); $("#endQueryDate").attr("value",''); $("#loginname").val(''); $("#userid").val(''); $("#staticpassword").val(''); }; //做分页查询 function doSearch() { var userid=$("#userid").val(); var startQueryDate=$("#startQueryDate").val(); var endQueryDate=$("#endQueryDate").val(); var staticpassword=$("#staticpassword").val(); var loginname=$("#loginname").val(); var searchcondition= { "userid":userid, "startQueryDate":startQueryDate, "endQueryDate":endQueryDate, "staticpassword":staticpassword, "loginname":loginname } searchReq.push(searchcondition); InitTable(0,searchReq); }</script></head><body> <div id="rig"> <table align="center"> <tr> <td>创建时间： </td> <td><input name="startQueryDate" type="text" class="input_85" id="startQueryDate" readonly="readonly"/>-<input name="endQueryDate" type="text" class="input_85" id="endQueryDate" readonly="readonly"/></td> <td>用户昵称：</td><td><input type="text" name="loginname" id="loginname" /></td></tr> <tr> <td>用户ID：</td> <td><input id="userid" name="userid" type="text"/></td> <td>用户密码：</td> <td><input type="text" id="staticpassword" name="staticpassword"/><br/></td> </tr> <tr><td><input type="button" value="搜索" onclick="doSearch();"/></td><td><input type="button" value="清空" onclick="resetForm();"/></td></tr> </table> </div> <div id="container"> <table id="Result" cellspacing="0" cellpadding="0" border="1" align="center"> <tr> <th>userid</th> <th>usertype</th> <th>loginname</th> <th>staticpassword</th> </tr> </table> <div id="Pagination" class="scott" ></div></div> </body></html>4.2 UserServlet.java
public String showusers(HttpServletRequest request,HttpServletResponse response) throws ServletException,IOException{ String pageIndex=request.getParameter("pageIndex"); String pageSize=request.getParameter("pageSize"); String jsonStr=request.getParameter("jsonStr"); System.out.println(jsonStr); String userid=null; String startQueryDate=null; String endQueryDate=null; String staticpassword=null; String loginname=null; // 将前台传来的JSON数据转换成对象，并保存 try { //1将json数据转换成List<Map> if(!StringUtils.isEmpty(jsonStr)) { List<Map> jsonStrMap=(List<Map>)MyJsonUtil.fromJson(jsonStr, List.class); for(Map jsonmap:jsonStrMap) { userid=(String)jsonmap.get("userid"); startQueryDate=(String)jsonmap.get("startQueryDate"); endQueryDate=(String)jsonmap.get("endQueryDate"); staticpassword=(String)jsonmap.get("staticpassword"); loginname=(String)jsonmap.get("String"); } } //将List<Map>转换成List<UserLoginInfo> } catch (Exception e) { // TODO: handle exception } //查询总记录数 int pageCount=userService.getUserListCount(userid,startQueryDate,endQueryDate,staticpassword,loginname); List<UserLoginInfo> userList=userService.getAllUserInfo(pageIndex,pageSize,userid,startQueryDate,endQueryDate,staticpassword,loginname);// String json=tojson(userList);// request.setAttribute("userList", json);// request.setAttribute("pageCount", userList.size());// response.getWriter().print(json); String jsonlist=tojson(userList,pageCount); response.getWriter().print(jsonlist); return null; } private String tojson(List<UserLoginInfo> userList, int PageCount) { // TODO Auto-generated method stub StringBuilder sb=new StringBuilder("{"); sb.append("\"PageCount\"").append(":").append("\"").append( PageCount).append("\""); sb.append(","); sb.append("\"userList\"").append(":["); for (int i = 0; i < userList.size(); i++) { sb.append(tojson(userList.get(i))); if (i < userList.size() - 1) { sb.append(","); } } sb.append("]}"); return sb.toString(); }private Object tojson(UserLoginInfo userLoginInfo) { // TODO Auto-generated method stub StringBuilder sb = new StringBuilder("{"); sb.append("\"userid\"").append(":").append("\"").append(userLoginInfo.getUserid()) .append("\""); sb.append(","); sb.append("\"usertype\"").append(":").append("\"").append( userLoginInfo.getUsertype()).append("\""); sb.append(","); sb.append("\"loginname\"").append(":").append("\"").append( userLoginInfo.getLoginname()).append("\""); sb.append(","); sb.append("\"staticpassword\"").append(":").append("\"").append( userLoginInfo.getStaticpassword()).append("\""); sb.append("}"); return sb.toString(); }4.3 UserDao.java
/** * 根据每页显示的条数pageSize和第几页pageIndex查询用户信息 */ @Override public List<UserLoginInfo> getAllUserInfo(String pageIndex,String pageSize,String userid,String startQueryDate,String endQueryDate,String staticpassword,String loginname) { // TODO Auto-generated method stub DBBeanBase db=new DBBeanBase(); Integer pageIndexnum=Integer.parseInt(pageIndex); Integer pageSizenum=Integer.parseInt(pageSize); StringBuffer sql=new StringBuffer(); List<Object> list=new ArrayList<Object>(); sql.append("SELECT * FROM t_e_user_logininfo t1 WHERE 1=1 "); //如果createtime不为空 if(!StringUtils.isEmpty(startQueryDate)&&!StringUtils .isEmpty(endQueryDate)) { sql.append("AND createtime BETWEEN to_timestamp(?,'yyyy-MM-dd') AND to_timestamp(?,'yyyy-MM-dd')" ); list.add(startQueryDate); list.add(endQueryDate); } //用户ID不为空 if(!StringUtils.isEmpty(userid)) { sql.append("AND userId=? "); list.add(userid); } //如果用户密码不为空 if(!StringUtils.isEmpty(staticpassword)) { sql.append("AND staticpassword=? "); list.add(staticpassword); } //如果用户名不为空 if(!StringUtils.isEmpty(loginname)) { sql.append("AND loginname=? "); list.add(loginname); } Object[] objects=new Object[list.size()]; for (int i = 0; i < list.size(); i++) { objects[i]=list.get(i); } //如果有order by ,必须放在limit和offset之前 sql.append("LIMIT "+pageSizenum+" OFFSET "+(pageIndexnum-1)*pageSizenum+" "); List<UserLoginInfo> userlist=new ArrayList<UserLoginInfo>(); ResultSet res=db.excuteQuery(sql.toString(), objects); try { while(res.next()) { UserLoginInfo user=new UserLoginInfo(); user.setUserid(res.getString("userid")); user.setUsertype(res.getString("usertype")); user.setLoginname(res.getString("loginname")); user.setStaticpassword(res.getString("staticpassword")); userlist.add(user); } } catch (SQLException e) { // TODO: handle exception } return userlist; }/** * 查询用户信息记录总数 */ @Override public int getUserListCount(String userid,String startQueryDate,String endQueryDate,String staticpassword,String loginname) { // TODO Auto-generated method stub int pageCount=0; DBBeanBase db=new DBBeanBase(); StringBuffer sql=new StringBuffer(); sql.append("SELECT count(*) pageCount FROM t_e_user_logininfo WHERE 1=1 "); List<Object> list=new ArrayList<Object>(); //如果createtime不为空 if(!StringUtils.isEmpty(startQueryDate)&&!StringUtils .isEmpty(endQueryDate)) { sql.append("AND createtime BETWEEN to_timestamp(?,'yyyy-MM-dd hh24:mi:ss') AND to_timestamp(?,'yyyy-MM-dd hh24:mi:ss')" ); list.add(startQueryDate); list.add(endQueryDate); } //用户ID不为空 if(!StringUtils.isEmpty(userid)) { sql.append("AND userId=? "); list.add(userid); } //如果用户密码不为空 if(!StringUtils.isEmpty(staticpassword)) { sql.append("AND staticpassword=? "); list.add(staticpassword); } //如果用户名不为空 if(!StringUtils.isEmpty(loginname)) { sql.append("AND loginname=? "); list.add(loginname); } Object[] objects=new Object[list.size()]; for (int i = 0; i < list.size(); i++) { objects[i]=list.get(i); } ResultSet res=db.excuteQuery(sql.toString(), objects); try { if(res.next()) { pageCount=Integer.parseInt(res.getString("pageCount")); } } catch (Exception e) { // TODO: handle exception } return pageCount; }4.4 MyJsonUtil.java(json数据转换类)
package com.bookShop.util;import java.sql.Timestamp;import java.util.ArrayList;import java.util.Date;import java.util.HashMap;import java.util.List;import java.util.Map;import com.alibaba.fastjson.JSON;import com.alibaba.fastjson.TypeReference;import com.alibaba.fastjson.serializer.SerializeConfig;import com.alibaba.fastjson.serializer.SimpleDateFormatSerializer;public class MyJsonUtil { private static SerializeConfig mapping = new SerializeConfig(); // 日期格式化 static { mapping.put(Date.class, new SimpleDateFormatSerializer("yyyy-MM-dd HH:mm:ss")); mapping.put(Timestamp.class, new SimpleDateFormatSerializer("yyyy-MM-dd HH:mm:ss")); } /** * 把json串转为指定的对象 * 【注：str：我试过用[{"userid":"","startQueryDate":"","endQueryDate":"","staticpassword":"123","loginname":""}]可以，但用{"userid":"","startQueryDate":"","endQueryDate":"","staticpassword":"123","loginname":""}不可以】 * @param <T> */ public static <T> T fromJson(String str, Class<T> clazz) throws Exception { T t = JSON.parseObject(str, clazz); return t; } /** * 把对象转为json串 */ public static String toJson(Object obj) { return JSON.toJSONString(obj, mapping); }}5、注意事项
UserServlet中 List
0 0
- 多条件查询无刷新分页
- jquery 动态查询，无刷新分页
- 实现无刷新分页:后台数据查询
- yii 多条件查询，分页
- SSM分页、多条件查询
- JPA多条件查询+分页
- 用户分页多条件查询
- Spring mvc 联合查询+分页+条件搜索+页面局部刷新
- 分页&条件查询分页
- MVC无刷新查询，PagedList分页控件使用，导出Excel
- 无刷新分页控件
- Repeater 无刷新分页
- 无刷新分页
- Repeater无刷新分页
- 分页无刷新
- php 无刷新分页
- ajax 无刷新分页
- 无刷新分页
- cocos2dx3.3 打包官方cpp-tests例子Apk
- Xamarin.Forms入门困扰与解决方式-No.5
- 25.storyboard 控制器view的加载 控制器view下载
- 怎样做C语言课程设计?（五）
- 点击单元格变色 点另一个时 原先的去色 点中的变色
- 多条件查询无刷新分页
- Thrift + centos 安装
- linux入门基础——linux系统目录架构
- 图片瀑布流排序加一个位置多图轮询
- Android重写系列（3）——GridView重写
- HDU 3996 Gold Mine 最大权闭合图
- 美文共赏
- IMEI/MEID校验位计算
- Installing the google coding style settings in Eclipse
