Rendering and sorting issue

Wabiloo

Hi,

I have data that is obtained by making call to a remote API asynchronously, and I add table.row.add( <object> ) to add that data to my table one row at a time.
The data contains a column representing data bitrate (in bytes). I want to render it in a readable format (eg. 14000000 becomes "14 MB" and 700000 becomes "700 KB", but I also want to be able to sort by that column and have the sort done on the original value

I setup my table in the following way:

 muxingTable = $('#muxings').DataTable( {
        "ordering": true,
        "order": [[ 0, "asc" ],[ 1, "asc" ],[ 2, "desc" ]],
        "paging": false,
        "columns": [
            { data: "muxing", title: "Muxing" },
            { data: "drm", title: "DRM" },
            {
                data: "bitrate",
                title: "Avg Bitrate",
                defaultContent: "-",
                render: dataTable_bitrate
            },
            { data: "output", title: "Output" }
        ]
    });

with the function dataTable_bitrate as follows:

function dataTable_bitrate(data, type, row, meta) {
    if (type === "sort") {
        return data ? parseInt(data) : null;
    } else {
        return data ? numeral(data).format('0 b') : undefined;
    }
}

Now, the table appears correctly when rendered. However, whether on initial fill of the table, or any subsequent re-ordering of the 3rd column (ie. bitrate), the sort clearly is still done alphanumerically, rather than numerically, as shown in this image:

I don't quite understand what I'm doing wrong...

colin

Hi @Wabiloo ,

Yep, that looks like it should work. We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here. It doesn't need the ajax load of the data, just data in the table.

Cheers,

Colin

Wabiloo

Hi @colin,

Here is a test case that shows the issue: http://live.datatables.net/nuzohuvu/1/edit
The table should be ordered by the numeric value of the 3rd column (bitrate)

colin

Hi @Wabiloo ,

If you add columns.type as number, then it works as expected - see here. Or, and the best way, would be not over-ride the type type in the columns.render, as it's that type which determines that it's a number or string or whatever - see here.

Cheers,

Colin

Wabiloo

Thanks @colin,
I didn't think of the type part of render. Makes a lot of sense...