如何对数据表中的容量列进行排序

Question

我有一个这样的容量列的数据表：

<table id="datatable" class="table">
<thead> <tr> <th>N</th> <th>capa</th> </tr> </thead>
<tbody>
    <tr>
        <td>1</td>
        <td>2 Go</td>
    </tr>
    <tr>
        <td>2</td>
        <td>1 To</td>
    </tr>
    <tr>
        <td>3</td>
        <td>320 Go</td>
    </tr>
    <tr>
        <td>4</td>
        <td>2 To</td>
    </tr>
    <tr>
        <td>5</td>
        <td>500 Go</td>
    </tr>
</tbody>
</table>

<script>
$(document).ready(function() {
    $('#datatable').dataTable({
    'aaSorting': [],
    'iDisplayLength': 50,
    'aLengthMenu': [[10, 25, 50, 100, 500, -1], [10, 25, 50, 100, 500, 'Tous']]
    });
}); 
</script>

我正在尝试对其进行排序以获得此结果：

2 Go
320 Go
500 Go
1 To
2 To

但是通过阅读排序插件文档无法弄清楚如何做到这一点。

谢谢

Answer 1

好的，终于明白了

http://jsfiddle.net/jkwoaj3x/1/

$('#datatable').dataTable({
     "columns": [
            null,
         { "orderDataType": "custom-sort" }
        ]
});

这是你的自定义排序函数

$.fn.dataTable.ext.order['custom-sort'] = function  ( settings, col )
{
return this.api().column( col, {order:'index'} ).nodes().map( function ( td, i ) {
    console.log($(td).text().replace(/[^0-9\.]+/g, ''));
    return $(td).text().replace(/[0-9]/g, '');
} );
}

这是你的解决方案吗？

Answer 2

如果我理解正确，您想对“capa”列的文本部分进行排序。您可以通过添加包含文本字段的列、隐藏它并在单击“capa”列标题时使用iDataSort 对隐藏列进行排序来实现此目的。

首先，将新的纯文本列添加到每一行：

<tr>
   <td>1</td>
   <td>2 Go</td>
   <td>Go</td>
</tr>

在数据表初始化代码中，使用aoColumns指定列定义：

...
'iDisplayLength': 50,
'aoColumns': [{},{ "iDataSort": 2 }, {'bVisible':false }],
...

这是一个有效的jsfiddle

Update: 听起来您想在 text 列 THEN int 列上进行排序，如果您之前刚刚说过的话会很有帮助。

'aoColumns': [{},{ "aDataSort": [2], "aTargets": [ 0, 2 ] }, {'bVisible': false, "aTargets": [ 0 ] }],

这是更新后的jsfiddle

Answer 3

您可以在 gigas 中拥有一个包含所有源数据的表，但由于在 columnDefs 选项中呈现，它可以在不更改嵌套数据的情况下以不同方式呈现，它将使用内置的排序来很好地工作

http://legacy.datatables.net/usage/columns

当我想显示句子并且仍然有可排序的列时，我总是这样做，它非常有效

    <table id="datatable" class="table">
    <thead> <tr> <th>N</th> <th>capa</th> </tr> </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>2</td>
        </tr>
        <tr>
            <td>2</td>
            <td>1000 </td>
        </tr>
        <tr>
            <td>3</td>
            <td>320</td>
        </tr>
        <tr>
            <td>4</td>
            <td>2000</td>
        </tr>
        <tr>
            <td>5</td>
            <td>500</td>
        </tr>
   </tbody>
</table>



//targets is the number of the column you want render (here number 1)

//care full!!!! use DataTable and not datatable, second is old and doesn't have all options, if you don't want use fnRender
    table = $('#datatable').DataTable({
     "columnDefs":{
                    "targets": 1, "visible": true, "searchable": true
                    , "render": function (data, type, row) {
                       if (type == "display") {
                        if (data > 1000)
                            return ((data / 1000) + " To");
                        else
                            return (data + " Go");
                       }
                      return data;
                    },
                  };
    });

这是最好的解决方案！

Answer 4

谢谢大家。 我正在提出对我有用的答案。

jQuery.extend(jQuery.fn.dataTableExt.oSort, {
"file-size-pre": function (a) {
    var x = a.substring(0, a.length - 2);
    var x_unit = (a.substring(a.length - 2, a.length) == "Go" ? 1000 : (a.substring(a.length - 2, a.length) == "To" ? 1000000 : 1));
    return parseInt(x * x_unit, 10);
},
    "file-size-asc": function (a, b) {
    return ((a < b) ? -1 : ((a > b) ? 1 : 0));
},
    "file-size-desc": function (a, b) {
    return ((a < b) ? 1 : ((a > b) ? -1 : 0));
}
});

$(document).ready(function () {
$('#datatable').dataTable({
    'columnDefs': [{ 'type': 'file-size', 'targets': 1 }],
        'aaSorting': [],
        'iDisplayLength': 50,
        'aLengthMenu': [ [10, 25, 50, 100, 500, -1],  [10, 25, 50, 100, 500, 'Tous'] ]
});
});

这是一个小提琴：http://jsfiddle.net/cu9taqfg/1/