ajax動態數據排序

<tr>
	<th width="2%" class="checkTh">
	<input type="checkbox" class="allcheck" name="allbox"  value="ON">
        </th>
       	<th width="14%" id="order_id" class="sort">工單號<div></div></th>
	<th width="12%" id="ERR_DATETIME" class="sort">故障發生時間<div></div></th>
	<th width="8%" id="ORDER_TYPE_ID" class="sort">故障類型<div></div></th>
	<th width="10%">故障描述</th>
	<th width="7%" id="ERR_LEVEL_ID" class="sort">故障等級 <div></div></th>
	<th width="7%" id="ISSUE_ID" class="sort">問題等級 <div></div></th>
	<th width="7%" id="ORDER_STATE_ID" class="sort">工單狀態 <div></div></th>
	<th width="41%" class="operate">操作</th>
</tr>

這裏列表的一個表頭.每個表頭都包含一個ID,ID是需要排序的字段.給定一個Class名稱

$("table th.sort").click(function(){	//table下class爲sort的th標籤綁定一個點擊事件
	if($(this).hasClass("asc")){	//判斷是升序還是降序
		$(".list table th.sort").removeClass("asc").removeClass("desc");  //將所有的class重置
		$(this).addClass("desc");  //添加class
		$("#orderSort").val($(this).attr("id")+" desc"); 將點擊的th標籤中的id賦值到ID爲orderSort隱藏表單域中 ID是用於排序的字段
		var data = $("#orderForm").serialize(); //獲得orderForm中的所有數據 格式化成: 我=1&你=2&他=3
		ajaxMutual(data); //調用ajaxMutual()方法將表單裏面的數據傳過去
	}else{
		$(".list table th.sort").removeClass("asc").removeClass("desc");
		$(this).addClass("asc");
		$("#orderSort").val($(this).attr("id")+" asc");
		var data = $("#orderForm").serialize();
		ajaxMutual(data);
	}
});

function ajaxMutual(data){
		$.ajax({
			type:"GET",
			url:"<%=basePath%>page/order_orderSortAjaxMutual?"+data,
			dataType: "json",
			success: function(json) {
		        var data = eval("("+json+")");
				addTable(data);
			} 
		});
	}

通過ajax從後臺獲取需要排序的數據

function addTable(data){
		$(".list table tbody").empty();
		for(var i=0;i<data.length;i++){
			var tr = $("<tr/>");
			tr.append("<td class='checkTh'><input class='checks' type='checkbox' value='"+data[i].ID+"' name='order.ids'></td>");
			if(data[i].ORDER_TYPE_ID=="4"){
				tr.append("<td><img title='人工報障' src='/oss/images/c.png'/> "+data[i].ORDER_ID+"</td>");
			}else if(data[i].ORDER_TYPE_ID=="1"){
				tr.append("<td><img title='RMS報障' src='/oss/images/r.png'/> "+data[i].ORDER_ID+"</td>");
			}else if(data[i].ORDER_TYPE_ID=="6"){
				tr.append("<td><img title='手機報障' src='/oss/images/m.png'/> "+data[i].ORDER_ID+"</td>");
			}
			tr.append("<td>"+data[i].ERR_DATETIME+"</td>");
			var errtype = {};
			var errlevel = {};
			var issuelevel = {};
			var orderstate = {};
			<c:forEach var="err" items="${publicMap.errType}">
			  baseText = "${err}";
			  aa = baseText.split("=");
			  errtype[aa[0]] = aa[1];
			</c:forEach>
			<c:forEach var="err" items="${publicMap.orderStateMap}">
			  baseText = "${err}";
			  aa = baseText.split("=");
			  orderstate[aa[0]] = aa[1];
			</c:forEach>
			<c:forEach var="err" items="${publicMap.errLevelMap}">
			  baseText = "${err}";
			  aa = baseText.split("=");
			  errlevel[aa[0]] = aa[1];
			</c:forEach>
			<c:forEach var="err" items="${publicMap.issueLevelMap}">
			  baseText = "${err}";
			  aa = baseText.split("=");
			  issuelevel[aa[0]] = aa[1];
			</c:forEach>
			if(errtype[data[i].ERR_TYPE_ID]!=""&&errtype[data[i].ERR_TYPE_ID]!=null){
				tr.append("<td>"+errtype[data[i].ERR_TYPE_ID]+"</td>");
			}else{
				tr.append("<td> </td>");
			}
			if(data[i].ERR_SYMPTOM!=""&&data[i].ERR_SYMPTOM!=null){
				if(data[i].ERR_SYMPTOM.length>6){
					tr.append("<td class='leftTd' title='"+data[i].ERR_SYMPTOM+"'>"+data[i].ERR_SYMPTOM.substring(0,6)+"</td>");
				}else{
					tr.append("<td class='leftTd' title='"+data[i].ERR_SYMPTOM+"'>"+data[i].ERR_SYMPTOM+"</td>");
				}
			}else{
				tr.append("<td> </td>");
			}
			if(errlevel[data[i].ERR_LEVEL_ID]!=""&&errlevel[data[i].ERR_LEVEL_ID]!=null){
				tr.append("<td>"+errlevel[data[i].ERR_LEVEL_ID]+"</td>");
			}else{
				tr.append("<td> </td>");
			}
			if(issuelevel[data[i].ISSUE_ID]!=""&&issuelevel[data[i].ISSUE_ID]!=null){
				tr.append("<td>"+issuelevel[data[i].ISSUE_ID]+"</td>");
			}else{
				tr.append("<td> </td>");
			}
			if(orderstate[data[i].ORDER_STATE_ID]!=""&&orderstate[data[i].ORDER_STATE_ID]!=null){
				tr.append("<td>"+orderstate[data[i].ORDER_STATE_ID]+"</td>");
			}else{
				tr.append("<td> </td>");
			}
			tr.append("<td><ul><li><a class='modify' href='<%=basePath%>page/order_queryOrderById?order.id="+data[i].ID+"&skip=0'>修改</a></li><li><a class='info' href='<%=basePath%>page/order_queryOrderById?order.id="+data[i].ID+"&skip=1'>工程師記錄</a></li><li><a class='comment' href='<%=basePath%>page/order_queryOrderById?order.id="+data[i].ID+"&skip=2'>用戶意見</a></li><li><a class='workflow' href='<%=basePath%>page/workflow_showDiagram?id="+data[i].ID+" rel='workflowDiagram'>工單流程</a></li><li><a class='print' href='<%=basePath%>page/order_queryOrderById?order.id="+data[i].ID+"&skip=3'>打印</a></li></ul></td>");		
			$(".list table tbody").append(tr);
		}
		$(".list table tbody tr:even").addClass("evenTr");
	}

如果有什麼問題,請留言.