这个插件里面分页功能很强大,调用者只需赋几个值就可以了。
下面是ticket.jsp 全代码:
<script type="text/javascript" src="../My97DatePicker/WdatePicker.js">
</script>
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://"
+ request.getServerName() + ":" + request.getServerPort()
+ path + "/";
%>
[color=red]<base href="<%=basePath%>">[/color] <!--这个路径根据自己而定-->
<%@page import="com.pojos.TbLog"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<script type="text/javascript" src="js/jquery-1.6.js">
</script>
<script type="text/javascript"
src="jslib/jquery_pagination/jquery.pagination.js">
</script>
<link rel="stylesheet" href="css/qne.css" type="text/css"></link>
<script language="javascript" type="text/javascript"
src="js/validate.js">
</script>
<script type="text/javascript" src="jslib/mytable/mytable1.1.js"
charset="gb2312">
</script>
<link rel="stylesheet" type="text/css" href="css/base.css">
<link type="text/css" rel="stylesheet"
href="jslib/mytable/css/mytable.css" />
<link type="text/css" rel="stylesheet"
href="jslib/jquery_pagination/pagination.css" />
<c:set scope="page" var="isColleague" value="${param.type==1}" />
<style>
table.mytable {
width: 1119px;
}
</style>
<script type="text/javascript">
function detail(orderid) {
var url = "<%=basePath%>/qne.do?p=orderManage&manageType=detail&orderid=" + orderid;
// var ShopConfirmLayer=jQuery("#ShopConfirmLayer").val();
$.get(url, {
id : "d"
}, function(content) {
document.getElementById("DetailLayer").innerHTML = content;
});
var DetailLayer = document.getElementById("DetailLayer");
var webBgLayer = document.getElementById("webBgLayer");
// ShopConfirmLayer.innerHTML=str;
DetailLayer.style.display = "";//显示内容层,显示覆盖层
webBgLayer.style.display = "";
webBgLayer.style.width = document.documentElement.scrollWidth + 200 + "px"; //为覆盖层设置宽度
webBgLayer.style.height = document.documentElement.scrollHeight + 1350
+ "px"; //为覆盖层设置高度
DetailLayer.style.left = ((webBgLayer.style.width - 726) / 2) + "px";
DetailLayer.style.top = Math
.abs(parseInt((document.documentElement.clientHeight - ShopConfirmLayer.offsetHeight) / 2))
+ document.documentElement.scrollTop + "px"; //为内容层设置位置
}
function alter(orderid){
var url = "<%=basePath%>/qne.do?p=orderManage&manageType=alter&orderid=" + orderid;
// var ShopConfirmLayer=jQuery("#ShopConfirmLayer").val();
$.get(url, {
id : "d"
}, function(content) {
document.getElementById("DetailLayer").innerHTML = content;
});
var DetailLayer = document.getElementById("DetailLayer");
var webBgLayer = document.getElementById("webBgLayer");
// ShopConfirmLayer.innerHTML=str;
DetailLayer.style.display = "";//显示内容层,显示覆盖层
webBgLayer.style.display = "";
webBgLayer.style.width = document.documentElement.scrollWidth + 200 + "px"; //为覆盖层设置宽度
webBgLayer.style.height = document.documentElement.scrollHeight + 1600
+ "px"; //为覆盖层设置高度
DetailLayer.style.left = ((webBgLayer.style.width - 726) / 2) + "px";
DetailLayer.style.top = Math
.abs(parseInt((document.documentElement.clientHeight - ShopConfirmLayer.offsetHeight) / 2))
+ document.documentElement.scrollTop + "px"; //为内容层设置位置
}
function CloseDetail() {
var DetailLayer = document.getElementById("DetailLayer");
var webBgLayer = document.getElementById("webBgLayer");
DetailLayer.style.display = "none";
webBgLayer.style.display = "none";
}
function drop(orderid) {
var url = "<%=basePath%>/qne.do?p=orderDrop&orderid=" + orderid;
question = confirm("您确定删除吗?")
if (question != "0") {
$.get(url, {
id : "d"
}, function(content) {
$("#query").click();
});
}
}
</script>
<%-- 查询表单与结果显示区 -start--%>
<div id="queryDiv" style="padding-top: 18px;">
<form id="queryForm" class="queryForm" onsubmit="sbCont()">
<table width="1117px" class="queryTable"
style="border: 1px solid silver;">
<tr>
<td>
订单号
</td>
<td>
<input type="text" name="orderNum" id="orderNum" class="isForm"
size="20" maxlength="20" />
</td>
<td>
订单状态
</td>
<td>
<select name="orderStatus" id="orderStatus" class="isForm">
<option value="">
</option>
<option value="0">
未出票申请退款
</option>
<option value="5">
支付成功等待出票
</option>
<option value="6">
出票中
</option>
<option value="7">
出票完成
</option>
<option value="4">
订单取消
</option>
</select>
</td>
<td>
订票时间
</td>
<td width="330px;">
<input type="text" name="time" id="time" class="isForm"
onClick="WdatePicker()" />
</td>
</tr>
<tr>
<td>
航班号
</td>
<td>
<input type="text" name="flightNum" class="isForm" size="10"
maxlength="10" />
</td>
<td>
舱位
</td>
<td>
<input type="text" name="cabin" id="cabin" class="isForm" />
</td>
<td>
出票完成时间
</td>
<td align="left">
<input type="text" name="finishTime" id="finishTime" class="isForm"
onClick="WdatePicker()" />
</td>
</tr>
<tr>
<td>
乘机人姓名
</td>
<td>
<input type="text" name="passengerName" id="passengerName"
class="isForm" size="10" maxlength="10" />
</td>
<td>
票号
</td>
<td>
<input type="text" name="ticketNum" id="ticketNum" class="isForm"
size="10" maxlength="10" />
</td>
<td>
PNR
</td>
<td>
<input type="text" name="pnr" id="pnr" class="isForm" size="10"
maxlength="10" />
联系人手机号
<input type="text" name="linkmanCellPhone" id="linkmanCellPhone"
class="isForm" size="10" maxlength="10" />
</td>
</tr>
<tr>
<td colspan="14">
<div>
<table style="border: 1px solid silver;">
<tr>
<td>
出发城市
</td>
<td>
<input type="text" name="startCity" id="startCity"
class="isForm" size="10" maxlength="10" />
</td>
<td>
到达城市
</td>
<td>
<input type="text" name="endCity" id="endCity" class="isForm"
size="10" maxlength="10" />
</td>
<td>
航班公司
</td>
<td>
<input type="text" name="flightCompany" id="flightCompany"
class="isForm" size="10" maxlength="10" />
</td>
<td>
航班时间
</td>
<td>
<input type="text" name="flightTime1" id="flightTime1"
class="isForm" onClick="WdatePicker()" />
</td>
<td>
航程类型
</td>
<td>
<select name="voyageType" id="voyageType" class="isForm">
<option value="">
全部航程
</option>
<option value="0">
单程
</option>
<option value="1">
往返
</option>
</select>
</td>
</tr>
</table>
</div>
</td>
</tr>
<tr>
<td colspan="14">
<div>
<table style="border: 1px solid silver;">
<tr>
<td>
出票员
</td>
<td>
<input type="text" name="drawer" id="drawer" class="isForm">
</td>
<td>
录入员
</td>
<td>
<select id="guider" name="guider" class="isForm">
<option value="">
全部录入员
</option>
</select>
</td>
</tr>
</table>
</div>
</td>
</tr>
<tr>
<td style="padding-bottom: 0px;">
<input type="submit" id="query" value="查询" />
<input type="reset" value="重置" />
</td>
</tr>
<tr>
<td height="8px;">
</td>
</tr>
</table>
</form>
</div>
<div class="viewResults">
<table class="mytable">
<thead>
<tr>
<th width="20">
<input type="checkbox" />
</th>
<th width="45">
序
</th>
<th>
<a xx="orderNum">订单号</a>
</th>
<th>
<a xx="name">订单当前状态</a>
</th>
<th>
<a xx="telphone">起始到达</a>
</th>
<th>
<a xx="mobilephone">航班</a>
</th>
<th>
<a xx="work_qq">舱位</a>
</th>
<th>
<a xx="office">出票日期</a>
</th>
<th>
<a xx="department.id">起飞时间</a>
</th>
<th>
<a xx="work_state">票价</a>
</th>
<th>
<a xx="agreement">出票员</a>
</th>
<th>
<a xx="lodging">操作</a>
</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<div style="float: left;">
<div id="pager" class="pagination" style="float: left;"></div>
<div
style="float: left; font: '宋体'; font-size: 14px; color: #000; margin-top: 5px;">
共
<span id="totalNums"></span>条记录
</div>
</div>
<div style="clear: both;"></div>
</div>
<!--详细信息内容层-->
<div id="DetailLayer"
style="position: absolute; top: 300px; left: 100px; z-index: 900; width: 726px; display: none; background-color: white">
<input name="button1" value="关闭" type="button" onclick="CloseDetail()" />
</div>
<!--覆盖层-->
<div id="webBgLayer"
style="position: absolute; top: 0px; left: 0px; z-index: 899; background-color: gray; height: 100%; width: 100%; display: none; -moz-opacity: 0.9; filter: alpha(opacity = 50);"></div>
[color=red]<%-- 查询表单与结果显示区 -end--%>[/color][color=red][b] <!--关键了-->[/b][/color]
<script type="text/javascript">
/*mytable--start*/
[color=red]var pagesTotal = 0;//定义总条数[/color]
$.mytable( {
<%-- param:{"pvalue":"000001000000000"},--%>
url : "<%=basePath%>/qne.do?p=searchOrder",
[color=red]sortCol : [ 'time', 'asc' ], //按pojo对象中的time 进行asc排序[/color]
storageSortColAttr : 'xx', //可有可无
afterTableLoad_beforePaginationLoad : function(cfg) {
cfg.pagesTotal = pagesTotal;
$('#totalNums').text(pagesTotal);
},
beforeLoad : function() {//mytable查询之前做表单验证
<%-- var t2 = $('#q_work_number');--%>
<%-- var t3 = $('#q_telphone');--%>
<%-- var t4 = $('#q_mobilephone');--%>
<%-- var t5 = $('#q_work_qq');--%>
<%-- var r1 = /[0-9]{1,20}/;--%>
<%-- var e2 = "【工号】应为数字。";--%>
<%-- var e3 = "【电话】应为数字。";--%>
<%-- var e4 = "【手机号】应为数字。";--%>
<%-- var e5 = "【工作QQ】应为数字。";--%>
<%-- return validate( [ t2, t3, t4, t5 ], [ r1, r1, r1, r1 ], [ e2, e3, e4,--%>
<%-- e5 ]);--%>
}
});
/*mytable--end*/
/*显示用户选择框 ---start*/
var guider = "000001000000000";
var selJson = false;//录入员、领取员、发放员的json串,此变量可放入一个公共页面缓存起来
if(selJson){
createOptions($("#guider"), guider);//录入员
} else {
$.post("user.do",{p:"getUsersByPurviewValues", "purviewValues":guider},function(json){
selJson = eval("("+json+")");
createOptions($("#guider"), guider);//录入员
});
}
function createOptions(sel, purviewValue) {
for(var i = 0; i < selJson.length; i++) {
if(purviewValue == selJson[i].purviewValue) {
sel.append("<option value='"+ selJson[i].id +"'>"+selJson[i].username+"</option>");
}
}
}
/*显示用户选择框 ---end*/
</script>
分页 Action 代码:
//得到页面传递name值
Map<String, String> param = new HashMap<String, String>();
for(Enumeration e = request.getParameterNames(); e.hasMoreElements();){
String key = (String)e.nextElement();
System.out.println(key);
if(!"p".equals(key)&& !"isSendPage".equals(key)) { //p 我也没搞清是什么作用 还没测试 不过这样可以通过
String value = (String)request.getParameter(key);
param.put(key, value);
}
}
//注意 map 的键必须是pojo 对象的属性
Nam qneOrderList = qne_OrderService.qneOrderSearchMap(param);
request.setAttribute("qneOrderList", qneOrderList);
request.setAttribute("sum", qneOrderList.remove(qneOrderList.size()-1)); //返回每页都数据
//在需加这段代码不要改动如下,之前不加分页时候第二页又是从1开始到最大条数
request.setAttribute("rowStart", request.getParameter("rowStart"));
action中 方法也可以这样写:
引用
Map<String, String> requestParaMap = filterRequestParameter(request);
在dao里面 创建stringBuffer 对象 获得map中的值 看是否为空,不为空则 append 。为hql语句。可以看这个:http://yzz9i.iteye.com/admin/blogs/1141648
分页Dao 代码:
//这个方法你也看得懂是干嘛的
private String getWhereContent2(Map<String, String> param) {
StringBuilder sb = new StringBuilder();
for (Iterator<String> iterator = param.keySet().iterator(); iterator
.hasNext();) {
String key = iterator.next(); //红色部分不需要改动 都是在插件里面配好了的(有需要可以改js)
if ([color=red]key != null && !"".equals(key) && !"col".equals(key)
&& !"order".equals(key) && !"rowStart".equals(key)
&& !"pageSize".equals(key)[/color]) {
if (param.get(key) != null && !"".equals(param.get(key))) {
[color=darkred]// 这下面部分if里面的条件是你要进行完全搜索的字段 不需要完全搜索的key 会进行下面的else条件 进行%xxx% 式 搜索[/color]
if ([color=red]"orderNum".equals(key) || "orderStatus".equals(key)
|| "flightNum".equals(key) || "cabin".equals(key)
|| "ticketNum".equals(key) || "pnr".equals(key)
|| "linkmanCellPhone".equals(key)
|| "startCity".equals(key) || "endCity".equals(key)
|| "flightCompany".equals(key)
|| "voyageType".equals(key)
|| "linkmanCellPhone".equals(key)[/color]) {
sb.append(" t." + key + " = '" + param.get(key)
+ "' and ");
} else {
sb.append(" t." + key + " like '%" + param.get(key)
+ "%' and ");
}
}
}
}
if (!"".equals(sb.toString())) {
sb.insert(0, " where(");
sb.delete(sb.lastIndexOf("and"), sb.length());
sb.append(") ");
}
return sb.toString();
}
@SuppressWarnings("unchecked")
public List qneOrderSearchMap(Map<String, String> param) {
System.out.println("---- -----");
if (null == param || param.isEmpty()) {
return null;
}
[color=red]// rowStart pageSize 在插件里面配好了 默认是 0 50 不需改动[/color]
[color=red]int rowStart = Integer.parseInt(param.get("rowStart"));
int pageSize = Integer.parseInt(param.get("pageSize"));[/color]
[color=red]// col order 在插件里面配好了 key值便是刚才在ticket.jsp 脚本中所配的 sortCol : [ 'time', 'asc' ][/color]
[color=red]String col = param.get("col");
String order = param.get("order");[/color]
boolean b = rowStart >= 0 && pageSize > 0;
String w = getWhereContent2(param);
String orderStr = ((null != col && !"".equals(col) && null != order && !""
.equals(order)) ? "order by t." + col + " " + order : "");
String hql = "from QNEOrder as t " + w + orderStr;
String countSql = "select count(*) from QNEOrder as t" + w;
System.out.println(hql);
Session session = getSession();
Query query = session.createQuery(hql);
List list = null;
if (b) {
query.setFirstResult(rowStart);
query.setMaxResults(pageSize);
}
System.out.println("hql=" + hql);
list = query.list();
if (b) {
// 查总记录数
List l = session.createQuery(countSql).list();
list.add(l.get(0));
}
System.out.println("size:" + list.size());
System.out.println("222");
return list;
}
分页 一个接收查询结果的rest.jsp :
引用
<!--<tr><td>ss</td></tr> //这种格式存储的-->
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%--<tr><td>ss</td></tr>--%>
<%----%>
<c:forEach items="${qneOrderList}" var="qlist" varStatus="vs">
<tr>
<td>${rowStart+vs.index+1}</td><!--这个很关键 跟在action里面的rowStart直接关联-->
<td>
${qlist.orderNum }
</td>
<td>
<c:if test="${qlist.orderStatus==0}">未出票申请退款</c:if>
<c:if test="${qlist.orderStatus==1}">订座成功待价格确认</c:if>
<c:if test="${qlist.orderStatus==2}">待座位确认</c:if>
<c:if test="${qlist.orderStatus==3}">订座成功待支付</c:if>
<c:if test="${qlist.orderStatus==4}">订单取消</c:if>
<c:if test="${qlist.orderStatus==5}">支付成功待出票</c:if>
<c:if test="${qlist.orderStatus==6}">出票中</c:if>
<c:if test="${qlist.orderStatus==7}">出票完成</c:if>
<c:if test="${qlist.orderStatus==8}">改签申请中</c:if>
<c:if test="${qlist.orderStatus==9}">改签完成</c:if>
<c:if test="${qlist.orderStatus==10}">退票申请中</c:if>
<c:if test="${qlist.orderStatus==11}">退票完成待退款</c:if>
<c:if test="${qlist.orderStatus==12}">退票完成</c:if>
<c:if test="${qlist.orderStatus==13}">待出保订单</c:if>
</td>
<td>
<fmt:formatDate value="${qlist.flightTime1}" type="time"
timeStyle="medium" />
${qlist.startCity }
</td>
<td>
<fmt:formatDate value="${qlist.flightTime1}" type="time"
timeStyle="medium" />
${qlist.endCity }
</td>
<td>
${qlist.flightNum }
</td>
<td>
<fmt:formatDate value="${qlist.finishTime }" type="both" />
</td>
<td>
<fmt:formatDate value="${qlist.flightTime1 }" type="both" />
</td>
<td>
${qlist.onTicketPrice }
</td>
<td>
${qlist.drawer }
</td>
<td>
<a href="javascript:void(0)" onclick="alter(${qlist.id})">修改</a>
<a href="javascript:void(0)" onclick="detail(${qlist.id})">详情</a>
<a href="javascript:void(0)" onclick="drop(${qlist.id})">删除</a>
<%-- <a href="javascript:void(0)" onclick="dropOrderButton()"></a>--%>
</td>
</tr>
</c:forEach>
<script>
pagesTotal = ${sum}; // 得到后台处理的最大条数把它传给show.jsp页面 </script>
先说到这儿,分页就可以实现了,而已还有ajax 获取值绑定在select中哦。
ajax 获取值绑定在select中用到的Action方法:
public ActionForward getUsersByPurviewValues(ActionMapping mapping, ActionForm form,
HttpServletRequest request, HttpServletResponse response)
throws Exception {
String pvs = request.getParameter("purviewValues");
String[] pvArr = null;
if(pvs != null) {
pvArr = pvs.split(",");
}
String json = iUserSetService.getUsersByPurviewValues(pvArr);
PrintWriter pw = response.getWriter();
pw.print(json);
pw.close();
return null;
}
ajax 获取值绑定在select中用到的Dao方法:
/**
* 通过权限值得到用户json串
* @param pvArr权限值数组
* @return
* @throws Exception
*/
@SuppressWarnings("unchecked")
public String getUsersByPurviewValues2(String[] pvArr) throws Exception {
String orS = MyUtils.getOrStr(pvArr, "p.value", true);
String temp = orS.length()>0?" WHERE "+orS:"";
String sql ="SELECT"+
" h.handlerID,h.name,p.value "+
"FROM "+
" tb_handler h "+
" INNER JOIN tb_group g ON h.group_id=g.id "+
" LEFT OUTER JOIN tb_group_purview gp ON g.id=gp.group_id "+
" INNER JOIN tb_purview p ON p.id=gp.purview_id "+
temp+
"UNION "+
"SELECT "+
" h.handlerID,h.name,p.value "+
"FROM "+
" tb_handler h "+
" LEFT OUTER JOIN tb_personal_purview pp ON h.handlerID=pp.hanlder_id "+
" INNER JOIN tb_purview p ON p.id=pp.purview_id "+
temp;
Session session = getSession();
List l = session.createSQLQuery(sql).list();
StringBuilder sb = new StringBuilder();
for (Iterator iterator = l.iterator(); iterator.hasNext();) {
Object[] o = (Object[]) iterator.next();
sb.append("{id:'"+ o[0] +"',username:'"+o[1]+"',purviewValue:'"+o[2]+"'},");
}
if(!"".equals(sb.toString())) {
sb.delete(sb.lastIndexOf(","), sb.length());
sb.insert(0, "[");
sb.append("]");
}
return sb.toString();
}
好好研究下 一定会让你收获不菲的哦!