没有找到datatable的排序方面运用案例，根据接口，自己实现 所以记录一二，小伙伴们有更好的方法，欢迎讨论
1、需求图
2、需求
1）默认是灰色
2）第一次点击 ：启动排序，图片降序变红
3）第二次点击：升序
4）第三次点击；关闭排序，即恢复默认
3、实现
1）尝试在一个div中通过 class来控制，可是在实现恢复默认时，出现混乱
2）改变想法，通过2层div来控制：第一层：控制开启；第二层：控制切换升降序
3）出现问题：第二层点击事件会有冒泡现象，使用方法：renturn false；e.stopPropagation();均不能奏效，可能是我写的是函数而不是 click区域控制
4）加上这一句就好 onClick="event.cancelBubble = true" 出处 http://blog.csdn.net/jimmy609/article/details/53487506
4、代码
1)、css
1 .orderType{width:9px;height:12px;display:inline-block;background:url(‘../pc/images/archives/order_default.png‘) no-repeat center center; 2 margin-left: 2px;position:relative;top:2px;} 3 .order{width:9px;height:12px;display:none;background:url(‘../pc/images/archives/order_desc.png‘) no-repeat center center;} 4 .orderActive .order{display:inline-block;}
2)、html
1 <table id="groupList" class="table table-striped text-left table60" style="width:100%;"> 2 <thead> 3 <tr> 4 <th>序号</th> 5 <th>班级名称 6 <span class="orderType" onclick="orderChange(this)"> 7 <span class="order" data-orderField ="groupName" data-orderType="desc" onclick="orderUP(this)"></span> 8 </span> 9 </th> 10 <th>课程名称 11 <span class="orderType" onclick="orderChange(this)"> 12 <span class="order" data-orderField ="courseName" data-orderType="desc" onclick="orderUP(this)"></span> 13 </span> 14 </th> 15 <th>上课时间</th> 16 <th>上课老师</th> 17 <th>总课时 18 <span class="orderType" onclick="orderChange(this)"> 19 <span class="order" data-orderField ="courseCount" data-orderType="desc" onclick="orderUP(this)"></span> 20 </span> 21 </th> 22 <th>未上课时 23 <span class="orderType" onclick="orderChange(this)"> 24 <span class="order" data-orderField ="leftCount" data-orderType="desc" onclick="orderUP(this)"></span> 25 </span> 26 </th> 27 <th>班级状态</th> 28 <th>班级人数 29 <span class="orderType" onclick="orderChange(this)"> 30 <span class="order" data-orderField ="memberCount" data-orderType="desc" onclick="orderUP(this)"></span> 31 </span> 32 </th> 33 <th>操作</th> 34 </tr> 35 </thead> 36 <tbody> 37 38 </tbody> 39 </table>
3)、js
1 function orderChange(obj){ 2 $(obj).parents().find(".orderType").removeClass("orderActive");//删除所有active 3 $(obj).addClass("orderActive");//当前元素添加active(意味着子元素显示) 4 $(obj).css("background","none");//当前元素隐藏(去掉背景) 5 //表格刷新 6 var table = $(‘#groupList‘).DataTable(); 7 table.ajax.reload(); 8 } 9 10 function orderUP(obj){ 11 event.cancelBubble = true;//阻止冒泡 12 var orderType = $(obj).attr("data-orderType") 13 if(orderType=="asc"){//点击升序时回到初始状态 14 $(obj).attr("data-orderType","desc"); 15 $(obj).css({"transform":"rotate(0deg)"}); 16 $(obj).parent().removeClass("orderActive"); 17 $(obj).parent().css("background","url(‘../pc/images/archives/order_default.png‘) no-repeat center center"); 18 //表格刷新 19 var table = $(‘#groupList‘).DataTable(); 20 table.ajax.reload(); 21 }else if(orderType=="desc"){ 22 $(obj).attr("data-orderType","asc"); 23 $(obj).css({"transform":"rotate(180deg)"}); 24 //表格刷新 25 var table = $(‘#groupList‘).DataTable(); 26 table.ajax.reload(); 27 } 28 }
以上就实现了//////////////////////////////////
顺便贴一下表格js
function completeData(){ var majorCode = $(‘#majorCode‘).val(); $showContent = $("#groupList"); var $dataTables = $showContent.dataTable( { language: lang, //"scrollY": "600px", "dom": ‘<"top"i>rt<"bottom"flp><"clear">‘, serverSide :true, "bDestroy": true, ‘bStateSave‘: true, ajax:api.selectGroupClassList, "paging": true, "info": false, "searching": false, "ordering": false, "responsive": true, "bServerSide":true, "sServerMethod": "POST", "sAjaxDataProp":"groupCourseDetails", "fnServerParams": function (aoData) { aoData["pageNum"] = this.api().page() + 1; aoData["pageSize"] = aoData.length; aoData["addressId"] = storageAddressId; aoData["majorCode"] = majorCode; aoData["token"] = token; aoData["orderField"] = $(".orderActive .order").attr("data-orderField"); aoData["orderType"] = $(".orderActive .order").attr("data-orderType"); delete aoData.draw; delete aoData.length; //delete aoData.columns; delete aoData.search; delete aoData.order; delete aoData.start; }, "columns": [ { "sWidth":"7%", data : null, bSortable : false, targets : 0, render : function(data, type, row, meta) { // 显示行号 var startIndex = meta.settings._iDisplayStart; return startIndex + meta.row + 1; } }, { "data": "groupName" }, { "data": "courseName" }, { "data": "startTime" }, { "data": "teacherName" }, { "data": "courseCount" }, { "data": "leftCount" }, { "data": "satus" }, { "data": "memberCount" }, { "data": "remove" } ], columnDefs : [ { "sWidth":"6%", searchable: false, orderable: false, targets: 0 }, { "sWidth":"10%", targets : 1 }, { "sWidth":"8%", targets : 2 }, { "sWidth":"10%", targets : 3, render :function(data, type, row, meta){ var courseTemplateList = row.courseTemplateList; var str=‘‘; if(courseTemplateList.length>0){ for(var i=0;i<courseTemplateList.length;i++){ var startTime = courseTemplateList[i].startTime; var weekDay = "周" + "日一二三四五六".charAt(courseTemplateList[i].weekDay); str+=‘<p>‘+weekDay+startTime+‘</p>‘; } } return str; } }, { "sWidth":"10%", targets : 4, render :function(data, type, row, meta){ var courseTemplateList = row.courseTemplateList; var str=‘‘; if(courseTemplateList.length>0){ for(var i=0;i<courseTemplateList.length;i++){ var teacherName = courseTemplateList[i].teacherName; str+=‘<p>‘+teacherName+‘</p>‘; } } return str; } }, { "sWidth":"8%", targets: 5 }, { "sWidth":"8%", targets: 6 }, { "sWidth":"10%", targets: 7, render: function(data, type, row, meta) { var status = row.satus== ‘1‘?‘开班中‘:‘已结班‘; return status; } }, { "sWidth":"8%", targets: 8 }, { "sWidth":"20%", targets: 9, render: function(data, type, row, meta){ var groupId = row.id; var status = row.satus; if(status=="1"){ var courseCount = row.courseCount; var a = ‘‘; if(courseCount>0){ a = ‘<a href="#myModalclasstime" style="color:#007aff;white-space: nowrap;" data="‘+groupId+‘" data-toggle="modal">查看上课时间</a>‘; }else{ a=‘‘; } var span1 = ‘<span class="replaceBlue" onclick="removeGroup(‘+groupId+‘)" style="cursor: pointer">课时管理</span>‘; var span2 = ‘<span class="replaceBlue" onclick="removeGroup(‘+groupId+‘)" style="cursor: pointer">成员管理</span>‘; var span3 = ‘<span class="replaceBlue" data-target="#myModalClassNew" data-toggle="modal" style="cursor: pointer">新增排课</span>‘; var deleteSpan = ‘<span class="replaceBlue" onclick="removeGroup(‘+groupId+‘)" style="cursor: pointer">结班</span>‘; return span1+span2+span3+deleteSpan ; } else if(status=="0"){ var span1 = ‘<span class="replaceBlue" onclick="removeGroup(‘+groupId+‘)" style="cursor: pointer">查看课时</span>‘; var span2 = ‘<span class="replaceBlue" onclick="removeGroup(‘+groupId+‘)" style="cursor: pointer">重新开班</span>‘; return span1+span2; } } } ] }); $dataTables.on(‘xhr.dt‘, function ( e, settings, json, xhr ) { if ( json.success ) { json = json["body"]; return json; } }); //.draw(); $.data($("#groupList")[0],"dataTables", $dataTables); }
