V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
CNCCTV
V2EX  ›  jQuery

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

  •  
  •   CNCCTV · 2015-08-13 19:34:48 +08:00 · 3403 次点击
    这是一个创建于 3418 天前的主题,其中的信息可能已经有所发展或是发生改变。
    <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>
    6 条回复    2015-08-13 22:48:34 +08:00
    jarlyyn
        1
    jarlyyn  
       2015-08-13 19:39:10 +08:00
    个人建议,传json或者转为js数组,用lodash/underscore排序。
    loading
        2
    loading  
       2015-08-13 19:48:59 +08:00 via Android
    这个应该属于不读文档的伸手方式
    CNCCTV
        3
    CNCCTV  
    OP
       2015-08-13 20:00:37 +08:00
    @loading 看不懂。。。
    CNCCTV
        4
    CNCCTV  
    OP
       2015-08-13 20:01:29 +08:00
    @loading 我看过File size
    http://www.datatables.net/plug-ins/sorting/file-size 这种方法,但是不行。
    jiaozhu
        5
    jiaozhu  
       2015-08-13 22:12:17 +08:00
    直接使用file-size插件就可以的

    示例地址: http://sandbox.runjs.cn/show/l4y72avz
    代码地址: http://runjs.cn/code/l4y72avz
    CNCCTV
        6
    CNCCTV  
    OP
       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 刚才在别人指导下改写好了。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2641 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 21ms · UTC 15:05 · PVG 23:05 · LAX 07:05 · JFK 10:05
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.