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

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

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

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

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

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

这是一个有效的jsfiddle

Update：所以听起来你想对文本列进行排序，然后在int列中进行排序，如果您之前刚刚说过，那将会有所帮助。

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

这是一个更新的jsfiddle

Answer 2

好的，终于明白了

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 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/

如何在Datatables中对capacity列进行排序

4 个答案: