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");
	}

如果有什么问题,请留言.