多条件查询无刷新分页
2015-05-22 17:35
204 查看
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
4.2 UserServlet.java
4.3 UserDao.java
4.4 MyJsonUtil.java(json数据转换类)
5、注意事项
UserServlet中 List jsonStrMap=(List)MyJsonUtil.fromJson(jsonStr, List.class);
将json数据转换成List时，如果用如下格式则可以成功：[{“userid”:”“,”startQueryDate”:”“,”endQueryDate”:”“,”staticpassword”:”123”,”loginname”:”“}
]
若用如下格式则转换失败：
{“userid”:”“,”startQueryDate”:”“,”endQueryDate”:”“,”staticpassword”:”123”,”loginname”:”“}
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 jsonStrMap=(List)MyJsonUtil.fromJson(jsonStr, List.class);
将json数据转换成List时，如果用如下格式则可以成功：[{“userid”:”“,”startQueryDate”:”“,”endQueryDate”:”“,”staticpassword”:”123”,”loginname”:”“}
]
若用如下格式则转换失败：
{“userid”:”“,”startQueryDate”:”“,”endQueryDate”:”“,”staticpassword”:”123”,”loginname”:”“}
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 万能分页存储过程(带第一页性能优化,任意条件查询,任意字段排序)
- 让Bootstrap的dataTable在重新设置了查询条件后进行不跳转页面ajax刷新
- V3.0 完善代码，按条件计算分页，按条件分页查询
- NHibernate分页获取，通用条件查询方法
- JSP通用分页组件，带查询条件
- ThinkPHP的使用(三)带查询条件的分页
- dwz单个查找带回-带分页-查询条件
- mybatis(3)分页查询和条件分页查询
- 多条件分页查询
- 动态多条件查询分页以及排序(一)--MVC与Entity Framework版url分页版
- JQueryEasyUI-DataGrid显示数据，条件查询，排序及分页
- java分页条件查询-GridManager.js表格插件+Pageable分页对象+mybatis pagehelper分页插件
- MVC调用存储过程实现分页，带查询条件
- springmvc4+spring4+hibernate4注解开发，分页查询，表头排序，多条件模糊查询，查询自动补全功能
- 【JAVAWEB学习笔记】21_多条件查询、attr和prop的区别和分页的实现
- ExtJs 4分页(pagingtoolbar)带参数(条件)查询解决方法
- Spring MVC结合Spring Data JPA实现按条件查询和分页
- 有无条件分页查询
- [原创] MVC3 Webgrid Ajax查询条件绑定（Search Conditions Binding）、自动编号(Serial Number)及分页(Paging)的样式定义
- ExtJs 3 ExtJs4 分页(pagingtoolbar)带参数(条件)查询解决方法