Sorting number with Text

bruceleeon

Any idea on how I can get the text included with a number to be calculated when sorting? Ie,

https://codpool.com

Notice the Network Hash Rate? There are MH/s, KH/s, and H/s. The number sort just fine, but I want to add a priority to MH/s over KH/s over H/s

I found this example: https://datatables.net/examples/plug-ins/sorting_auto - but it does not take into account a number with the word.

Here is my current setup

$(document).ready(function() {
    var table = $('#sortthisbitch').DataTable( {
          /*responsive: {
            breakpoints: [
              {name: 'bigdesktop', width: Infinity},
              {name: 'meddesktop', width: 1480},
              {name: 'smalldesktop', width: 1280},
              {name: 'medium', width: 1188},
              {name: 'tabletl', width: 1024},
              {name: 'btwtabllandp', width: 848},
              {name: 'tabletp', width: 768},
              {name: 'mobilel', width: 480},
              {name: 'mobilep', width: 320}
            ],
            columnDefs: [
                { responsivePriority: 1, targets: 0 },
                { responsivePriority: 2, targets: -2 }
            ]
          },*/
        responsive: true,
        columnDefs: [
            { responsivePriority: 1, targets: 0 },
            { responsivePriority: 2, targets: -2 }
        ],
        paging:   false,
        aoColumnDefs: [{'bSortable': false, 'aTargets': [ -1 ]}],
        orderCellsTop: true,
        columnDefs: [
            { "type": "percent", targets: 2 }
        ],
        dom: 'Bfrtip',
        buttons: [
        'copy', 'excel', 'pdf', 'colvis'
        ]
    } );
} );

kthorngren

The first problem is that your data is not simply the text shown but also includes the HTML wrapping the text. I tried the natural.js sorting plugin but it didn't work well. I created an example that seems to work:
http://jsfiddle.net/xb2gtfd5/3/

You will want to read about orthogonal data and columns.render. Basically I extract the text from the HTMl using jQuery (47.98 KH/s) then split it at the space. I use the hash rate text as the prefix and depending on the value I assign the prefix a numeric string (1 - 3). 0 is used if no match. I pad the number to 7 digits with 0 and then prefix the numeric HR value, resulting in something like this: 20047.98. This value is returned for the sort orthogonal data type.

My assumptions are that there will always be 2 fractional digits and 1 to 3 integer digits resulting in at least one 0 for the padding.

This is the code I added to your columnDefs:

    {
       targets: [5, 6],
          render: function (data, type, row) {
            if (type === 'sort') {
                // Use jQuery to extract text from HTML element
                var content = $(data).text().split(' ');
              // Expected result: ["15.62", "KH/s"]
              if (content && content.length === 2) {
                var prefix = '0';  // If no match sort this to the top
                var hr = content[1]; //Hash Rate "KH/s"
                if (hr === 'MH/s') {
                    prefix = '1';
                } else if (hr === 'KH/s') {
                    prefix = '2';
                } else if (hr === 'H/s') {
                    prefix = '3';
                }
                return prefix + content[0].padStart(7, '0');  
                                // Example: 20015.62
              }
            }
            return data;
          }
        }

Also note that you have 3 columnDefs options. I don't believe they are cumulative. The aoColumnDefs is the legacy option while columnDefs is the current. Either works but you should just have one defined with all your options.

Kevin