How to sort numbers and text in the same column Javascript

Question

I have a table that uses DataTables. The table consists of 4 columns and has text in some and numbers in some as well. Within the numbers column if there is no number then 'null' is shown in the td. How can I still sort the numbers correctly and give the null value a 0 or some number to help sort better?

Right now when you sort through the list it's not sorting more than one digit. So '10' comes before '3'. Also, do you notice the 1440 comes before 180.

You can view my http://codepen.io/tetonhiker/pen/dOBeqY

$(function() {
  $('#dataTable').DataTable({
    "paging": false,
    "info": false
  });
});










  
    
      Shape Name
      Number Edges
      Sum of Interior Angles
      Deleted?
    
  
  
    
      Hexagon
      6
      null
      No
    
    
      null
      3
      180
      No
    
    
      null
      4
      360
      No
    
    
      null
      5
      540
      No
    
    
      null
      6
      120
      No
    
    
      null hello
      10
      1440
      No
    
    
      Octagon sample
      8
      null
      No
    
    
      pentagon
      null
      null
      No
    
    
      Pentagon
      null
      null
      No
    
    
      square-test
      4
      null
      No
    
    
      Square
      null
      null
      No

lostInTheTetons · Accepted Answer

Try out this sorting plugin for DataTables: https://datatables.net/plug-ins/sorting/natural

(function() {

/*
 * Natural Sort algorithm for Javascript - Version 0.7 - Released under MIT     license
 * Author: Jim Palmer (based on chunking idea from Dave Koelle)
 * Contributors: Mike Grier (mgrier.com), Clint Priest, Kyle Adams, guillermo
 * See: http://js-naturalsort.googlecode.com/svn/trunk/naturalSort.js
 */
function naturalSort (a, b, html) {
var re = /(^-?[0-9]+(\.?[0-9]*)[df]?e?[0-9]?%?$|^0x[0-9a-f]+$|[0-9]+)/gi,
    sre = /(^[ ]*|[ ]*$)/g,
    dre = /(^([\w ]+,?[\w ]+)?[\w ]+,?[\w ]+\d+:\d+(:\d+)?[\w ]?|^\d{1,4}[\/\-]\d{1,4}[\/\-]\d{1,4}|^\w+, \w+ \d+, \d{4})/,
    hre = /^0x[0-9a-f]+$/i,
    ore = /^0/,
    htmre = /(<([^>]+)>)/ig,
    // convert all to strings and trim()
    x = a.toString().replace(sre, '') || '',
    y = b.toString().replace(sre, '') || '';
    // remove html from strings if desired
    if (!html) {
        x = x.replace(htmre, '');
        y = y.replace(htmre, '');
    }
    // chunk/tokenize
var xN = x.replace(re, '\0$1\0').replace(/\0$/,'').replace(/^\0/,'').split('\0'),
    yN = y.replace(re, '\0$1\0').replace(/\0$/,'').replace(/^\0/,'').split('\0'),
    // numeric, hex or date detection
    xD = parseInt(x.match(hre), 10) || (xN.length !== 1 && x.match(dre) && Date.parse(x)),
    yD = parseInt(y.match(hre), 10) || xD && y.match(dre) && Date.parse(y) || null;

// first try and sort Hex codes or Dates
if (yD) {
    if ( xD < yD ) {
        return -1;
    }
    else if ( xD > yD ) {
        return 1;
    }
}

// natural sorting through split numeric strings and default strings
for(var cLoc=0, numS=Math.max(xN.length, yN.length); cLoc < numS; cLoc++) {
    // find floats not starting with '0', string or 0 if not defined (Clint Priest)
    var oFxNcL = !(xN[cLoc] || '').match(ore) && parseFloat(xN[cLoc], 10) || xN[cLoc] || 0;
    var oFyNcL = !(yN[cLoc] || '').match(ore) && parseFloat(yN[cLoc], 10) || yN[cLoc] || 0;
    // handle numeric vs string comparison - number < string - (Kyle Adams)
    if (isNaN(oFxNcL) !== isNaN(oFyNcL)) {
        return (isNaN(oFxNcL)) ? 1 : -1;
    }
    // rely on string comparison if different types - i.e. '02' < 2 != '02' < '2'
    else if (typeof oFxNcL !== typeof oFyNcL) {
        oFxNcL += '';
        oFyNcL += '';
    }
    if (oFxNcL < oFyNcL) {
        return -1;
    }
    if (oFxNcL > oFyNcL) {
        return 1;
    }
}
return 0;
}

jQuery.extend( jQuery.fn.dataTableExt.oSort, {
"natural-asc": function ( a, b ) {
    return naturalSort(a,b,true);
},

"natural-desc": function ( a, b ) {
    return naturalSort(a,b,true) * -1;
},

"natural-nohtml-asc": function( a, b ) {
    return naturalSort(a,b,false);
},

"natural-nohtml-desc": function( a, b ) {
    return naturalSort(a,b,false) * -1;
},

"natural-ci-asc": function( a, b ) {
    a = a.toString().toLowerCase();
    b = b.toString().toLowerCase();

    return naturalSort(a,b,true);
},

"natural-ci-desc": function( a, b ) {
    a = a.toString().toLowerCase();
    b = b.toString().toLowerCase();

    return naturalSort(a,b,true) * -1;
}
} );

}());

How to sort numbers and text in the same column Javascript

Answers (2)

Related Questions