datatable 多字段 排序；
2024-06-07 07:50:04
没有找到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------ 2个函数
1 function orderChange(obj){
2 $(obj).parents().find(".orderType").removeClass("orderActive");//删除所有active
3 $(obj).parents().find(".orderType").css({"background":"url('../pc/images/archives/order_default.png') no-repeat center center"});//所有的默认背景
4 $(obj).addClass("orderActive");//当前元素添加active(意味着子元素显示)
5 $(obj).css("background","none");//当前元素隐藏(去掉背景)
6 //第二个div order的默认状态
7 $(obj).find(".order").attr("data-orderType","desc");//前端默认序列
8 $(obj).find(".order").css({"transform":"rotate(0deg)"});//默认下箭头
9 //表格刷新
10 var table = $('#groupList').DataTable();
11 table.ajax.reload();
12 }
13
14 function orderUP(obj){
15 event.cancelBubble = true;//阻止冒泡
16 var orderType = $(obj).attr("data-orderType");
17
18 if(orderType=="asc"){//点击升序时回到初始状态
19 $(obj).attr("data-orderType","desc");
20 $(obj).css({"transform":"rotate(0deg)"});
21 $(obj).parent().removeClass("orderActive");
22 $(obj).parent().css("background","url('../pc/images/archives/order_default.png') no-repeat center center");
23 //表格刷新
24 var table = $('#groupList').DataTable();
25 table.ajax.reload();
26 }else if(orderType=="desc"){
27 $(obj).attr("data-orderType","asc");
28 $(obj).css({"transform":"rotate(180deg)"});
29 //表格刷新
30 var table = $('#groupList').DataTable();
31 table.ajax.reload();
32 }
33 console.log(orderType);
34 }以上就实现了//
顺便贴一下表格js
1 function completeData(){
2 var majorCode = $('#majorCode').val();
3 $showContent = $("#groupList");
4 var $dataTables = $showContent.dataTable( {
5 language: lang,
6 //"scrollY": "600px",
7 "dom": '<"top"i>rt<"bottom"flp><"clear">',
8 serverSide :true,
9 "bDestroy": true,
10 'bStateSave': true,本地保存
11 ajax:api.selectGroupClassList,
12 "paging": true,
13 "info": false,
14 "searching": false,
15 "ordering": false,
16 "responsive": true,
17 "bServerSide":true,
18 "sServerMethod": "POST",
19 "sAjaxDataProp":"groupCourseDetails",
20 "fnServerParams": function (aoData) {
21 aoData["pageNum"] = this.api().page() + 1;
22 aoData["pageSize"] = aoData.length;
23 aoData["addressId"] = storageAddressId;
24 aoData["majorCode"] = majorCode;
25 aoData["token"] = token;
26 aoData["orderField"] = $(".orderActive .order").attr("data-orderField");
27 aoData["orderType"] = $(".orderActive .order").attr("data-orderType");
28 delete aoData.draw;
29 delete aoData.length;
30 //delete aoData.columns;
31 delete aoData.search;
32 delete aoData.order;
33 delete aoData.start;
34 },
35 "columns": [
36 {
37 "sWidth":"7%",
38 data : null,
39 bSortable : false,
40 targets : 0,
41 render : function(data, type, row, meta) {
42 // 显示行号
43 var startIndex = meta.settings._iDisplayStart;
44 return startIndex + meta.row + 1;
45 }
46 },
47 { "data": "groupName" },
48 { "data": "courseName" },
49 { "data": "startTime" },
50 { "data": "teacherName" },
51 { "data": "courseCount" },
52 { "data": "leftCount" },
53 { "data": "satus" },
54 { "data": "memberCount" },
55 { "data": "remove" }
56 ],
57 columnDefs : [
58 { "sWidth":"6%",
59 searchable: false,
60 orderable: false,
61 targets: 0
62 },
63 {
64 "sWidth":"10%",
65 targets : 1
66 },
67 {
68 "sWidth":"8%",
69 targets : 2
70 },
71 {
72 "sWidth":"10%",
73 targets : 3,
74 render :function(data, type, row, meta){
75 var courseTemplateList = row.courseTemplateList;
76 var str='';
77 if(courseTemplateList.length>0){
78 for(var i=0;i<courseTemplateList.length;i++){
79 var startTime = courseTemplateList[i].startTime;
80 var weekDay = "周" + "日一二三四五六".charAt(courseTemplateList[i].weekDay);
81 str+='<p>'+weekDay+startTime+'</p>';
82 }
83 }
84 return str;
85 }
86 },
87 {
88 "sWidth":"10%",
89 targets : 4,
90 render :function(data, type, row, meta){
91 var courseTemplateList = row.courseTemplateList;
92 var str='';
93 if(courseTemplateList.length>0){
94 for(var i=0;i<courseTemplateList.length;i++){
95 var teacherName = courseTemplateList[i].teacherName;
96 str+='<p>'+teacherName+'</p>';
97 }
98 }
99 return str;
100 }
101
102 },
103 {
104 "sWidth":"8%",
105 targets: 5
106 },
107 {
108 "sWidth":"8%",
109 targets: 6
110 },
111 { "sWidth":"10%",
112 targets: 7,
113 render: function(data, type, row, meta) {
114 var status = row.satus== '1'?'开班中':'已结班';
115 return status;
116 }
117 },
118 { "sWidth":"8%",
119 targets: 8
120 },
121 { "sWidth":"20%",
122 targets: 9,
123 render: function(data, type, row, meta){
124 var groupId = row.id;
125 var status = row.satus;
126 if(status=="1"){
127 var courseCount = row.courseCount;
128 var a = '';
129 if(courseCount>0){
130 a = '<a href="#myModalclasstime" style="color:#007aff;white-space: nowrap;" data="'+groupId+'" data-toggle="modal">查看上课时间</a>';
131 }else{
132 a='';
133 }
134
135 var span1 = '<span class="replaceBlue" οnclick="removeGroup('+groupId+')" style="cursor: pointer">课时管理</span>';
136 var span2 = '<span class="replaceBlue" οnclick="removeGroup('+groupId+')" style="cursor: pointer">成员管理</span>';
137 var span3 = '<span class="replaceBlue" data-target="#myModalClassNew" data-toggle="modal" style="cursor: pointer">新增排课</span>';
138 var deleteSpan = '<span class="replaceBlue" οnclick="removeGroup('+groupId+')" style="cursor: pointer">结班</span>';
139
140 return span1+span2+span3+deleteSpan ;
141 }
142 else if(status=="0"){
143 var span1 = '<span class="replaceBlue" οnclick="removeGroup('+groupId+')" style="cursor: pointer">查看课时</span>';
144 var span2 = '<span class="replaceBlue" οnclick="removeGroup('+groupId+')" style="cursor: pointer">重新开班</span>';
145 return span1+span2;
146 }
147
148
149 }
150 }
151 ]
152 });
153 $dataTables.on('xhr.dt', function ( e, settings, json, xhr ) {
154 if ( json.success ) {
155 json = json["body"];
156 return json;
157 }
158 });
159 //.draw();
160 $.data($("#groupList")[0],"dataTables", $dataTables);
161 }-----------------------清除表格缓存
function selectClassBySchool(){
localStorage.removeItem("DataTables_groupList_/ArtAppInst2/inst2/groupClass");
completeData();
}
转载于:https://www.cnblogs.com/roxanneQQyxm/p/8480418.html
datatable 多字段 排序；相关推荐
- ng-repeat根据多个字段排序
2019独角兽企业重金招聘Python工程师标准>>> ng-repeat多个字段排序的写法 使用orderBy过滤器,第一个参数是一个数组,表示依次按数组中的属性值进行排序(若按第 ...
- mysql order by 多字段排序
工作中需用到order by 后两个字段排序,但结果却产生了一个Bug,以此备录. [1]复现问题场景 为了说明问题,模拟示例数据库表students,效果同实例. 如下语句Sql_1: 1 SELE ...
- vim 按照字段排序文件
假设有如下数据,以空格为数据列分割: 1 何维川 124.63 172 0.72 2 张子寅 99.67 172 0.58 3 周广滨 93.34 1 ...
- 一个关于nvarchar字段排序,中英文混合排序的问题
有一个nvachar字段,里面有很多中英文混合的纪录 当按照这个字段排序的时候,无法按照英文a-z.中文的顺序排列 晴问如何解? 另外如何设置排序规则 你看看现在是什么排序规则? select SE ...
- linux sort 时间排序,linux sort多字段排序实例解析
本文研究的主要是linux sort多字段排序,具体介绍如下. Linux多数发行版自带的sort程序,非常强大,在此只说多字段排序 sort 有个参数-k,可以指定字段,有比较复杂的语法,不在文本范 ...
- php根据数组某一字段排序,php如何根据数组中某一字段来实现排序
php如何根据数组中某一字段来实现排序 发布时间:2020-04-28 14:53:01 来源:亿速云 阅读:40 作者:小新 php如何根据数组中某一字段来实现排序?很多人都不太了解,今天小编为了让 ...
- mysql ef 随机排序_EFCore+Mysql倉儲層建設(分頁、多字段排序、部分字段更新)
前沿 園子里已有挺多博文介紹了EFCore+Mysql/MSSql如何進行使用,但實際開發不會把EF層放在Web層混合起來,需要多個項目配合結構清晰的進行分層工作,本文根據個人實踐經驗總結將各個項目進 ...
- CakePHP下使用paginator需要对多个字段排序的做法
原文:http://blog.csdn.net/kunshan_shenbin/article/details/7644603 CakePHP下使用paginator需要对多个字段排序的做法 201 ...
- 检索数据_18_按照多个字段排序查询结果
按照多个字段排序查询结果 需求描述 需求:从雇员表emp里查询所有的部门编号,员工名称,职位,工资信息,这里要求先以部门编号排序再以工资从高到低排序显示. 解决方法:这里用到SQL的关键字 ORDER ...
最新文章
- 将Quartz.NET集成到 Castle中
- 仿BlogEngine.NET的cnBlog主题
- Object overview 页面点击Edit button白屏问题
- acm教程 java版_ACM之java速成 (转)
- JavaMail中解决中文附件名乱码的问题
- 经纬度，墨卡托等坐标转换
- python压缩和读取.tar.bz2格式的压缩包
- Java 代码块：静态代码块、构造代码块、构造函数块
- 如何给软件开发项目估价？
- 国内知名的java商城系统排名
- IP地址规划的重要性
- 看完这篇Linux基本的操作就会了 1
- ANSYS Electronics Desktop 19.2电机仿真思路
- leetcode507. 完美数
- td强制换行《http://www.cnblogs.com/Fooo/archive/2011/03/28/1998048.html》
- 牛顿迭代法求解多项式方程的近似解
- 细线表格-今日小说排行榜
- 信号强度 android,一种获取手机信号强度的方法
- 校内模拟赛(20170917)
- 数据代码如何“产地直销”，做到持续集成持续发布？