How to sort capacities column in Datatables

Question

i have a datatable with capacities column like this :

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

and I am trying to sort it to get this result :

2 Go
320 Go
500 Go
1 To
2 To

But can't figure out how to do it from reading the sorting plugins docs.

Thanks

Answer 1

If I understand correctly, you want to sort on the text part of the 'capa' column. You can achieve this by adding a column containing the text field, hiding it, and using iDataSort to sort on the hidden column when the 'capa' column header is clicked.

First, add the new text-only column to each row:

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

In the datatable initialisation code, use aoColumns to specify the column definitions:

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

Here's a working jsfiddle

Update : so it sounds like you want to sort on the text column THEN the int column, it would have been helpful if you had just stated that earlier.

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

Here's an updated jsfiddle

Answer 2

Ok, finally got it

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

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

and this is your custom sort func

$.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, '');
} );
}

is it your solution?

Answer 3

you can have a table with all source data in gigas but render it differently without change nested data thanks to render in columnDefs option , it will use the built-in sort for numbers that works very well

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

I always do that when i want to display sentences and still have sortable column and it is very efficient

    <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;
                    },
                  };
    });

It is best solution !

Answer 4

Thanks everyone. I'm putting my answer which works well for me.

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'] ]
});
});

Here is a fiddle : http://jsfiddle.net/cu9taqfg/1/