没有找到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);
}
原文地址：https://www.cnblogs.com/roxanneQQyxm/p/8480418.html
时间： 2024-11-15 06:04:18