请问怎么用 Datatables 来排序这个数据源?

2015-08-13 19:34:48 +08:00
 CNCCTV
<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>总流量</th>
<th>剩余流量</th>
<th>已用流量</th>
<th>上传流量</th>
<th>下载流量</th>
</tr>
</thead>
<tbody>
<tr >
<td>300.8GB</td>
<td>1GB</td>
<td>990.46MB</td>
<td>85.49MB</td>
<td>904.96MB</td>
</tr><tr>
<td>10.19GB</td>
<td>11MB</td>
<td>56.23MB</td>
<td>8.27MB</td>
<td>47.97MB</td>
</tr><tr>
<td>11.16GB</td>
<td>2GB</td>
<td>2.13GB</td>
<td>34.43MB</td>
<td>2.09GB</td>
</tr><tr>
<td>10.21GB</td>
<td>22GB</td>
<td>62.53MB</td>
<td>695.07KB</td>
<td>61.85MB</td>
</tr><tr>
<td>10.06GB</td>
<td>3GB</td>
<td>149.57KB</td>
<td>149.57KB</td>
<td>58GB</td>
</tr><tr>
<td>10GB</td>
<td>33GB</td>
<td>135.24KB</td>
<td>132GKB</td>
<td>33GB</td>
</tr><tr>
<td>11.34GB</td>
<td>4GB</td>
<td>2.12GB</td>
<td>106.51MB</td>
<td>2.02GB</td>
</tr><tr>
<td>10GB</td>
<td>44GB</td>
<td>794.03MB</td>
<td>127.48MB</td>
<td>666.55MB</td>
</tr><tr>
<td>10.21GB</td>
<td>5GB</td>
<td>262.59MB</td>
<td>18.61MB</td>
<td>243.99MB</td>
</tr><tr>
<td>5.26GB</td>
<td>55GB</td>
<td>20.48MB</td>
<td>142.5KB</td>
<td>20.34MB</td>
</tr></tbody>
</table>
3442 次点击
所在节点    jQuery
6 条回复
jarlyyn
2015-08-13 19:39:10 +08:00
个人建议,传json或者转为js数组,用lodash/underscore排序。
loading
2015-08-13 19:48:59 +08:00
这个应该属于不读文档的伸手方式
CNCCTV
2015-08-13 20:00:37 +08:00
@loading 看不懂。。。
CNCCTV
2015-08-13 20:01:29 +08:00
@loading 我看过File size
http://www.datatables.net/plug-ins/sorting/file-size 这种方法,但是不行。
jiaozhu
2015-08-13 22:12:17 +08:00
直接使用file-size插件就可以的

示例地址: http://sandbox.runjs.cn/show/l4y72avz
代码地址: http://runjs.cn/code/l4y72avz
CNCCTV
2015-08-13 22:48:34 +08:00
jQuery.extend( jQuery.fn.dataTableExt.oSort, {
/*
* 文件 KB MB GB 排序
* 点击排序后优先执行*-pre,随后执行*-asc 或 *-desc
*
* "aoColumnDefs": [
* { "sType": "cfl", "aTargets": [0]}, //指定列号使用自定义排序
* { "sType": "cfl", "aTargets": [1]},
* { "sType": "cfl", "aTargets": [2]},
* { "sType": "cfl", "aTargets": [3]},
* { "sType": "cfl", "aTargets": [4]},
* ],
*
*/
"cfl-pre" : function (str) {
x = String(str).replace(/\d+(\.\d+)*/, ""); //替换所有数字符并转为number类型
console.log(x);
z = Number(String(str).replace(/(KB|MB|GB)/, ""));
console.log(z);
var multiplier = 1;
if ( x === 'KB' ) {
multiplier = 1024;
}
else if ( x === 'MB' ) {
multiplier = 1048576;
}
else if ( x === 'GB' ) {
multiplier = 1073741824;
}
z = z * multiplier;
return z;
},
"cfl-asc" : function (s1, s2) {
return (s1 < s2) ? -1 : ((s1 > s2) ? 1 : 0);
},
"cfl-desc" : function (s1, s2) {
return ((s1 < s2) ? 1 : ((s1 > s2) ? -1 : 0));
}

} );

@jiaozhu 刚才在别人指导下改写好了。

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://tanronggui.xyz/t/213030

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX