<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"); }
如果有什么问题,请留言.
ajax动态数据排序
最新推荐文章于 2024-07-10 03:42:34 发布