jquery表格排序
1.为每个th加一个id
[html]
<thead>
<tr>
<th align="center" id="SERIAL_NUMBER">DATAPATCHNUMBER</th>
<th align="center" id="SA_USERNAME">SA</th>
<th align="center" id="U_USERNAME">Raised by </th>
<th align="center" id="U_PRIORITY">Priority</th>
<th align="center" id="ITD_DEV_USERNAME">Developer</th>
<th align="center" id="ITD_STATUS">Status</th>
<th align="center" id="U_SUBMIT_DATE">Submit Date </th>
<th align="center" id="SA_RECE_DATE">Receive Date </th>
<th align="center">操作</th>
</tr>
</thead>
2. Id的名字和要排序的字段保持一致，即sql语句中order by 后面的字段。
3.为每个th添加click事件。
[java]
<pre class="css" name="code">//添加根据不同的列排序
[css]
$("thead > tr >th").eq(0).click(function(){
var ordertype="DESC";
if("${v_order_type}"=="DESC"){//如果前一次是升序，那么下一次就按降序排列
ordertype="ASC";
}else{//如果前一次是降序，那么下一次就按升序排列
ordertype="DESC";
}
#datapatchForm").attr("action","<%=path%>/datapatch/initDatapatchInf.do? ordertype="+ordertype+"&order_field=SERIAL_NUMBER");//提交的时候传递两个参数。Ordertype(ASC,DESC)排序方式, order_field(与th的id一样)排序字段$("#datapatchForm").submit();
[css]
});
4 后台代码。
[html]
<pre>
[html]
//获得传递的两个参数
String v_order_field=request.getParameter("order_field");
String v_order_type=request.getParameter("ordertype");
//设置默认值，主要是第一次加载上面两个参数为空
if(StringUtil.isEmpty(v_order_field)){
v_order_field = "DATAPATCH_ID";//排序字段
}
if(StringUtil.isEmpty(v_order_type)){
v_order_type = "DESC";//按降序排列
}
//存入作用域周中
request.setAttribute("v_order_type", v_order_type);
request.setAttribute("v_order_field", v_order_field);
5. 前台页面根据不同的排序更换th的图标。
[html]
if("${v_order_type}"=="DESC"){
$("#${v_order_field}").css("background-image", "url(<%=path%>/images/asc.gif)");
}else{
$("#${v_order_field}").css("background-image", "url(<%=path%>/images/desc.gif)");
}
默认图标的样式：
<style type="text/css">
table.tablesorter thead tr th {
background-image: url(<%=path%>/images/bg.gif);
background-repeat: no-repeat;
background-position: center right;
background-color:#CAE8EA;
cursor: pointer;
} </style>
6. 具体参考:
页面：
[html]
<%@ page language="java" pageEncoding="gbk"%>
<%@page import="java.util.List"%>
<%@page import="java.util.ArrayList"%>
<%@page import="java.util.Map"%>
<%@page import="com.aegon_cnooc.util.StringUtil"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://struts.apache.org/tags-logic" prefix="logic" %>
<%
String path = request.getContextPath();
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>数据维护信息查询</title>
<link rel="stylesheet" type="text/css" href="<%=path%>/css/page_table.css">
<script type="text/javascript" src="../js/jquery_easyui/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="../js/dateDialog.js"></script>
<script type="text/javascript" src="../js/tablesort/jquery-latest.js"></script>
<link rel="stylesheet" href="../js/tablesort/flora/flora.tablesorter.css" type="text/css"></link>
<script type="text/javascript" src="../js/tablesort/jquery.tablesorter.js"></script>
<script type="text/javascript" src="../js/common.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//$("#datapatchinf").tablesorter({sortList:[[0,0]], widgets: ['zebra']});//0为升序 1降。
if("${v_order_type}"=="DESC"){
$("#${v_order_field}").css("background-image", "url(<%=path%>/images/asc.gif)");
}else{
$("#${v_order_field}").css("background-image", "url(<%=path%>/images/desc.gif)");
}
//添加根据不同的列排序
$("thead > tr >th").eq(0).click(function(){
var ordertype="DESC";
if("${v_order_type}"=="DESC"){
ordertype="ASC";
}else{
ordertype="DESC";
}
$("#datapatchForm").attr("action","<%=path%>/datapatch/initDatapatchInf.do?ordertype="+ordertype+"&order_field=SERIAL_NUMBER");
$("#datapatchForm").submit();
});
$("thead > tr >th").eq(1).click(function(){
var ordertype="DESC";
if("${v_order_type}"=="DESC"){
ordertype="ASC";
}else{
ordertype="DESC";
}
$("#datapatchForm").attr("action","<%=path%>/datapatch/initDatapatchInf.do?ordertype="+ordertype+"&order_field=SA_USERNAME");
$("#datapatchForm").submit();
});
$("thead > tr >th").eq(2).click(function(){
var ordertype="DESC";
if("${v_order_type}"=="DESC"){
ordertype="ASC";
}else{
ordertype="DESC";
}
$("#datapatchForm").attr("action","<%=path%>/datapatch/initDatapatchInf.do?ordertype="+ordertype+"&order_field=U_USERNAME");
$("#datapatchForm").submit();
});
$("thead > tr >th").eq(3).click(function(){
var ordertype="DESC";
if("${v_order_type}"=="DESC"){
ordertype="ASC";
}else{
ordertype="DESC";
}
$("#datapatchForm").attr("action","<%=path%>/datapatch/initDatapatchInf.do?ordertype="+ordertype+"&order_field=U_PRIORITY");
$("#datapatchForm").submit();
});
$("thead > tr >th").eq(4).click(function(){
var ordertype="DESC";
if("${v_order_type}"=="DESC"){
ordertype="ASC";
}else{
ordertype="DESC";
}
$("#datapatchForm").attr("action","<%=path%>/datapatch/initDatapatchInf.do?ordertype="+ordertype+"&order_field=ITD_DEV_USERNAME");
$("#datapatchForm").submit();
});
$("thead > tr >th").eq(5).click(function(){
var ordertype="DESC";
if("${v_order_type}"=="DESC"){
ordertype="ASC";
}else{
ordertype="DESC";
}
$("#datapatchForm").attr("action","<%=path%>/datapatch/initDatapatchInf.do?ordertype="+ordertype+"&order_field=ITD_STATUS");
$("#datapatchForm").submit();
});
$("thead > tr >th").eq(6).click(function(){
var ordertype="DESC";
if("${v_order_type}"=="DESC"){
ordertype="ASC";
}else{
ordertype="DESC";
}
$("#datapatchForm").attr("action","<%=path%>/datapatch/initDatapatchInf.do?ordertype="+ordertype+"&order_field=U_SUBMIT_DATE");
$("#datapatchForm").submit();
});
$("thead > tr >th").eq(7).click(function(){
var ordertype="DESC";
if("${v_order_type}"=="DESC"){
ordertype="ASC";
}else{
ordertype="DESC";
}
$("#datapatchForm").attr("action","<%=path%>/datapatch/initDatapatchInf.do?ordertype="+ordertype+"&order_field=SA_RECE_DATE");
$("#datapatchForm").submit();
});
});
</script>
<style type="text/css">
table.tablesorter thead tr th {
background-image: url(<%=path%>/images/bg.gif);
background-repeat: no-repeat;
background-position: center right;
background-color:#CAE8EA;
cursor: pointer;
}
</style>
</head>
<body>
<%
List list = (List)request.getAttribute("datapatchInfList");
String v_current_page = request.getAttribute("v_current_page")==null?"1":(String) request.getAttribute("v_current_page");
int i_current_page = Integer.parseInt(v_current_page);
if(list==null){
list = new ArrayList();
}
//总页数
Integer v_out_total_page = (Integer)list.get(list.size()-1);
//总记录数
Integer v_out_recordcount = (Integer)list.get(list.size()-2);
//排序方式
String v_order_type=(String)request.getAttribute("v_order_type");
//排序字段
String v_order_field=(String)request.getAttribute("v_order_field");
%>
<div>
<form id="datapatchForm" action="<%=path%>/datapatch/initDatapatchInf.do" method="post">
<table align="center" cellpadding="0" cellspacing="0" width="100%">
<tr>
<th colspan="6" align="left">查询条件</th>
</tr>
<tr>
<th class="specalt" scope="row" abbr="Model">DATAPATCH NUMBER：</th>
<td class="common"><input type="text" name="datapatchInf.serialnumber" value="${datapatchInf.serialnumber }"></td>
<th class="specalt_bt" scope="row" abbr="Model">System：</th>
<td class="common">
<select name="datapatchInf.system">
<option value="">请选择</option>
<logic:iterate id="s" name="systemList">
<option value="${s.sys_code }" <c:if test="${datapatchInf.system==s.sys_code }">selected</c:if> >${s.label }</option>
</logic:iterate>
</select>
</td>
</tr>
<tr>
<th class="specalt" scope="row" abbr="Model">Service：</th>
<td class="common">
<select name="datapatchInf.service">
<option value="">请选择</option>
<option value="Data Change" <c:if test="${datapatchInf.service=='Data Change' }">selected</c:if>>Data Change</option>
<option value="Defect Fix" <c:if test="${datapatchInf.service=='Defect Fix' }">selected</c:if>>Defect Fix</option>
<option value="Batch" <c:if test="${datapatchInf.service=='Batch' }">selected</c:if>>Batch</option>
<option value="Other" <c:if test="${datapatchInf.service=='Other' }">selected</c:if>>Other</option>
</select>
</td>
<th class="specalt_bt" scope="row" abbr="Model">SA：</th>
<td class="common">
<select name="datapatchInf.sa">
<option value="">请选择</option>
<logic:iterate id="s" name="saList">
<option value="${s.value }" <c:if test="${datapatchInf.sa==s.value }">selected</c:if> >${s.desc }</option>
</logic:iterate>
</select>
</td>
</tr>
<tr>
<th class="specalt" scope="row" abbr="Model">Raised by:</th>
<td class="common">
<select name="datapatchInf.raisedby">
<option value="">请选择</option>
<logic:iterate id="s" name="saList">
<option value="${s.value }" <c:if test="${datapatchInf.raisedby==s.value }">selected</c:if> >${s.desc }</option>
</logic:iterate>
</select>
</td>
<th class="specalt_bt" scope="row" abbr="Model">
Priority：
</th>
<td class="common">
<select name="datapatchInf.priority">
<option value="">请选择</option>
<option value="Normal" <c:if test="${datapatchInf.priority=='Normal' }">selected</c:if> >Normal</option>
<option value="Emergency" <c:if test="${datapatchInf.priority=='Emergency' }">selected</c:if>>Emergency</option>
</select>
</td>
</tr>
<tr>
<th class="specalt" scope="row" abbr="Model">Developer:</th>
<td class="common">
<select name="datapatchInf.developer">
<option value="">请选择</option>
<logic:iterate id="s" name="saList">
<option value="${s.value }" <c:if test="${datapatchInf.developer==s.value }">selected</c:if> >${s.desc }</option>
</logic:iterate>
</select>
</td>
<th class="specalt_bt" scope="row" abbr="Model">
Status：
</th>
<td class="common">
<select name="datapatchInf.status">
<option value="">请选择</option>
<option value="Normal" <c:if test="${datapatchInf.status=='Normal' }">selected</c:if> >Normal</option>
<option value="Emergency" <c:if test="${datapatchInf.status=='Emergency' }">selected</c:if> >Emergency</option>
</select>
</td>
</tr>
<tr>
<th class="specalt" scope="row" abbr="Model">
Submit Date：
</th>
<td class="common" colspan="3">
<input type="text" id="createTimeStart" name="datapatchInf.substarttime" value="${datapatchInf.substarttime }" onClick="fPopUpCalendarDlg(createTimeStart);return false">-<input type="text" id="createTimeEnd" name="datapatchInf.subendtime" value="${datapatchInf.subendtime }" onClick="fPopUpCalendarDlg(createTimeEnd);return false">
</td>
</tr>
<tr>
<th class="specalt" scope="row" abbr="Model">
Receive Date：
</th>
<td class="common" colspan="3">
<input type="text" id="transactTimeStart" name="datapatchInf.recstarttime" value="${datapatchInf.recstarttime }" onClick="fPopUpCalendarDlg(transactTimeStart);return false">-<input type="text" id="transactTimeEnd" name="datapatchInf.recendtime" value="${datapatchInf.recendtime }" onClick="fPopUpCalendarDlg(transactTimeEnd);return false">
<input type="submit" value="查询">
</td>
</tr>
</table>
<table id="datapatchinf" class="tablesorter" style="margin-top: 10px;" align="center" cellpadding="0" cellspacing="0" border="0" width="100%">
<thead>
<tr>
<th align="center" id="SERIAL_NUMBER">DATAPATCH NUMBER</th>
<th align="center" id="SA_USERNAME">SA</th>
<th align="center" id="U_USERNAME">Raised by </th>
<th align="center" id="U_PRIORITY">Priority</th>
<th align="center" id="ITD_DEV_USERNAME">Developer</th>
<th align="center" id="ITD_STATUS">Status</th>
<th align="center" id="U_SUBMIT_DATE">Submit Date </th>
<th align="center" id="SA_RECE_DATE">Receive Date </th>
<th align="center">操作</th>
</tr>
</thead>
<tbody>
<% for(int i=0;i<list.size()-2;i++){
Map map = (Map)list.get(i);%>
<tr>
<td class="first" scope="row" abbr="Model"><%=StringUtil.getNulToBlank(map.get("SERIAL_NUMBER") )%></td>
<td class="common" scope="row" abbr="Model"><%=StringUtil.getNulToBlank(map.get("SA_USERNAME") )%></td>
<td class="common" scope="row" abbr="Model"><%=StringUtil.getNulToBlank(map.get("U_USERNAME") )%></td>
<td class="common" scope="row" abbr="Model"><%=StringUtil.getNulToBlank(map.get("U_PRIORITY") )%></td>
<td class="common" scope="row" abbr="Model"><%=StringUtil.getNulToBlank(map.get("ITD_DEV_USERNAME") )%></td>
<td class="common" scope="row" abbr="Model"><%=StringUtil.getNulToBlank(map.get("ITD_STATUS") )%></td>
<td class="common" scope="row" abbr="Model"><%=StringUtil.getNulToBlank(map.get("U_SUBMIT_DATE") )%></td>
<td class="common" scope="row" abbr="Model"><%=StringUtil.getNulToBlank(map.get("SA_RECE_DATE") )%></td>
<td class="common" scope="row" abbr="Model"><a href="<%=path%>/datapatch/seeDatapatchInf.do?datapatch_id=<%=map.get("DATAPATCH_ID") %>">查看</a></td>
</tr>
<%} %>
</tbody>
</table>
<table style="margin-top: 0px;" align="center" cellpadding="0" cellspacing="0" border="0" width="100%">
<tr>
<th colspan="9">
一共<%=v_out_recordcount %>条记录
一共<%=v_out_total_page %>页
当前${v_current_page }页
<a href="javascript:page_first();">第一页</a>
<a href="javascript:page_pre();">上一页</a>
<a href="javascript:page_next();">下一页</a>
<a href="javascript:page_last();">最后一页</a>
</th>
</tr>
</table>
</form>
</div>
<script>
function page_first()
{
$("#datapatchForm").attr("action","<%=path+"/datapatch/initDatapatchInf.do?ordertype="+v_order_type+"&order_field="+v_order_field+"&v_current_page=1" %>");
$("#datapatchForm").submit();
}
function page_pre()
{
$("#datapatchForm").attr("action","<%=path+"/datapatch/initDatapatchInf.do?ordertype="+v_order_type+"&order_field="+v_order_field+"&v_current_page="+(i_current_page-1==0?1:i_current_page-1)%>");
$("#datapatchForm").submit();
}
function page_next()
{
$("#datapatchForm").attr("action","<%=path+"/datapatch/initDatapatchInf.do?ordertype="+v_order_type+"&order_field="+v_order_field+"&v_current_page="+(i_current_page+1>v_out_total_page.intValue()?v_out_total_page.intValue():i_current_page+1)%>");
$("#datapatchForm").submit();
}
function page_last()
{
$("#datapatchForm").attr("action","<%=path+"/datapatch/initDatapatchInf.do?ordertype="+v_order_type+"&order_field="+v_order_field+"&v_current_page="+v_out_total_page.toString() %>");
$("#datapatchForm").submit();
}
</script>
${msg }
</body>
</html>
后台代码：
[java]
package com.aegon_cnooc.oa.datapatch.action;
import java.sql.Connection;
import java.util.List;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.apache.struts.action.ActionForm;
import org.apache.struts.action.ActionForward;
import org.apache.struts.action.ActionMapping;
import com.aegon_cnooc.framework.base.action.BaseAction;
import com.aegon_cnooc.framework.db.ConnectionPool;
import com.aegon_cnooc.framework.log.Log;
import com.aegon_cnooc.oa.datapatch.form.QueryDatapatchForm;
import com.aegon_cnooc.oa.ibatis.bo.DatapatchInfBO;
import com.aegon_cnooc.oa.pub.service.PageService;
import com.aegon_cnooc.oa.sr.service.SRService;
import com.aegon_cnooc.oa.sr.service.impl.SRServiceImpl;
import com.aegon_cnooc.oa.workflow.WFEngine;
import com.aegon_cnooc.util.LogPathUtil;
import com.aegon_cnooc.util.StringUtil;
/**
* 加载数据维护信息查询
* @Author: liuxinghui
* @Date: 2011-11-18
* @Version: 2.0
* @Despcrition:
*/
public class InitDatapatchInfAction extends BaseAction{
private PageService pageService;
Log logWrite=new Log();
public ActionForward executeAction(ActionMapping mapping, ActionForm form,
HttpServletRequest request, HttpServletResponse response)
throws Exception {
logWrite.writeLog(LogPathUtil.getPath(), "开始加载数据维护信息查询页面", "info");
String v_order_field=request.getParameter("order_field");
String v_order_type=request.getParameter("ordertype");
ConnectionPool connectionPool = ConnectionPool.getInstance();
Connection conn = connectionPool.getConnection();
WFEngine engine = new WFEngine();
QueryDatapatchForm datapatchForm=(QueryDatapatchForm)form;
DatapatchInfBO datapatchInf=datapatchForm.getDatapatchInf();
//获得System
SRService srService = new SRServiceImpl();
List systemList = srService.getSystemList(conn, null);
//获得SA和Developer
List saList = engine.getOptionByName("tu_oaf_users", "user_id", "user_name", " where dept='IT' and enable=1 and is_leave=0 order by user_name", conn);
//获得数据维护信息的分页数据
String v_table_name="TU_OAF_DATA_PATCH_MAIN";//表名
String v_get_fields = "DATAPATCH_ID,SA_USERID,SA_USERNAME,U_USERID,U_USERNAME,U_PRIORITY,ITD_DEV_USERID,ITD_DEV_USERNAME,ITD_STATUS,U_SUBMIT_DATE,SA_RECE_DATE,U_SYS,U_SYSTEM,SERIAL_NUMBER";//需要获得的字段
if(StringUtil.isEmpty(v_order_field)){
v_order_field = "DATAPATCH_ID";//排序字段
}
String v_page_size = "10";//每页的大小
String v_current_page = request.getParameter("v_current_page");//当前页
if (StringUtil.isEmpty(v_current_page) ){
v_current_page = "1";
}
if(StringUtil.isEmpty(v_order_type)){
v_order_type = "DESC";//按降序排列
}
String v_sql_where = " 1=1";//查询条件
if(StringUtil.isNotEmpty(datapatchInf.getSerialnumber())){
v_sql_where+=" and upper(SERIAL_NUMBER) like'%"+datapatchInf.getSerialnumber().toUpperCase()+"%'";
}
if(StringUtil.isNotEmpty(datapatchInf.getSystem())){
v_sql_where+=" and U_SYS='"+datapatchInf.getSystem()+"'";
}
if(StringUtil.isNotEmpty(datapatchInf.getService())){
v_sql_where+=" and U_SYSTEM='"+datapatchInf.getService()+"'";
}
if(StringUtil.isNotEmpty(datapatchInf.getSa())){
v_sql_where+=" and SA_USERID='"+datapatchInf.getSa()+"'";
}
if(StringUtil.isNotEmpty(datapatchInf.getRaisedby())){
v_sql_where+=" and U_USERID='"+datapatchInf.getRaisedby()+"'";
}
if(StringUtil.isNotEmpty(datapatchInf.getPriority())){
v_sql_where+=" and U_PRIORITY='"+datapatchInf.getPriority()+"'";
}
if(StringUtil.isNotEmpty(datapatchInf.getDeveloper())){
v_sql_where+=" and ITD_DEV_USERID="+datapatchInf.getDeveloper()+"";
}
if(StringUtil.isNotEmpty(datapatchInf.getStatus())){
v_sql_where+=" and ITD_STATUS='"+datapatchInf.getStatus()+"'";
}
if(StringUtil.isNotEmpty(datapatchInf.getSubstarttime())&&StringUtil.isNotEmpty(datapatchInf.getSubendtime())){
v_sql_where+=" and to_char(U_SUBMIT_DATE,'yyyy-MM-dd') between '"+datapatchInf.getSubstarttime()+"' and '"+datapatchInf.getSubendtime()+"'";
}
if(StringUtil.isEmpty(datapatchInf.getSubstarttime())&&StringUtil.isNotEmpty(datapatchInf.getSubendtime()))
{
v_sql_where+=" and to_char(U_SUBMIT_DATE,'yyyy-MM-dd')<='"+datapatchInf.getSubendtime()+"'";
}
if(StringUtil.isNotEmpty(datapatchInf.getSubstarttime())&&StringUtil.isEmpty(datapatchInf.getSubendtime()))
{
v_sql_where+=" and to_char(U_SUBMIT_DATE,'yyyy-MM-dd')>='"+datapatchInf.getSubstarttime()+"'";
}
if(StringUtil.isNotEmpty(datapatchInf.getRecstarttime())&&StringUtil.isNotEmpty(datapatchInf.getRecendtime())){
v_sql_where+=" and to_char(SA_RECE_DATE,'yyyy-MM-dd') between '"+datapatchInf.getRecstarttime()+"' and '"+datapatchInf.getRecendtime()+"'";
}
if(StringUtil.isEmpty(datapatchInf.getRecstarttime())&&StringUtil.isNotEmpty(datapatchInf.getRecendtime()))
{
v_sql_where+=" and to_char(SA_RECE_DATE,'yyyy-MM-dd')<='"+datapatchInf.getRecendtime()+"'";
}
if(StringUtil.isNotEmpty(datapatchInf.getRecstarttime())&&StringUtil.isEmpty(datapatchInf.getRecendtime()))
{
v_sql_where+=" and to_char(SA_RECE_DATE,'yyyy-MM-dd')>='"+datapatchInf.getRecstarttime()+"'";
}
List datapatchInfList=pageService.getPage(v_table_name, v_get_fields, v_order_field, v_page_size, v_current_page, v_order_type, v_sql_where);
request.setAttribute("systemList", systemList);
request.setAttribute("saList", saList);
request.setAttribute("datapatchInfList", datapatchInfList);
request.setAttribute("v_current_page", v_current_page);
request.setAttribute("datapatchInf", datapatchInf);
request.setAttribute("v_order_type", v_order_type);
request.setAttribute("v_order_field", v_order_field);
logWrite.writeLog(LogPathUtil.getPath(), "加载完毕 www.2cto.com ", "info");
conn.commit();
conn.close();
return mapping.findForward("success");
}
public void setPageService(PageService pageService) {
this.pageService = pageService;
}
}
摘自xinghui_liu的专栏
