如何在同一列中對數字和文本進行排序Javascript

Question

我有一張使用DataTable的表。該表由4列組成，其中也包含一些文本和數字。在數字列中，如果沒有數字，則在td中顯示'null'。我怎樣才能仍然正確地排序數字，並給空值0或一些數字，以幫助更好地分類？

現在，當您對列表進行排序時，它不會排序多個數字。所以'10'在'3'之前。此外，你注意到1440到來之前180

您可以查看我的http://codepen.io/tetonhiker/pen/dOBeqY

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

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"> 
 
<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css"> 
 
<link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.13/css/jquery.dataTables.css"> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> 
 
<script src="https://code.getmdl.io/1.3.0/material.min.js"></script> 
 
<script src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.js"></script> 
 

 

 
<table id="dataTable" class="mdl-data-table mdl-js-data-table mdl-shadow--2dp dataTable"> 
 
    <thead> 
 
    <tr role="row"> 
 
     <th class="mdl-data-table__cell--non-numeric">Shape Name</th> 
 
     <th class="numeric-cell">Number Edges</th> 
 
     <th class="numeric-cell">Sum of Interior Angles</th> 
 
     <th class="mdl-data-table__cell--non-numeric">Deleted?</th> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr class="rowEditData odd" value="7924" role="row" title=""> 
 
     <td class="mdl-data-table__cell--non-numeric">Hexagon</td> 
 
     <td class="numeric-cell">6</td> 
 
     <td class="numeric-cell">null</td> 
 
     <td class="mdl-data-table__cell--non-numeric">No</td> 
 
    </tr> 
 
    <tr class="rowEditData odd deleted" value="7930" role="row" title=""> 
 
     <td class="mdl-data-table__cell--non-numeric">null</td> 
 
     <td class="numeric-cell">3</td> 
 
     <td class="numeric-cell">180</td> 
 
     <td class="mdl-data-table__cell--non-numeric">No</td> 
 
    </tr> 
 
    <tr class="rowEditData even" value="7931" role="row"> 
 
     <td class="mdl-data-table__cell--non-numeric">null</td> 
 
     <td class="numeric-cell">4</td> 
 
     <td class="numeric-cell">360</td> 
 
     <td class="mdl-data-table__cell--non-numeric">No</td> 
 
    </tr> 
 
    <tr class="rowEditData odd" value="7932" role="row" title=""> 
 
     <td class="mdl-data-table__cell--non-numeric">null</td> 
 
     <td class="numeric-cell">5</td> 
 
     <td class="numeric-cell">540</td> 
 
     <td class="mdl-data-table__cell--non-numeric">No</td> 
 
    </tr> 
 
    <tr class="rowEditData even" value="7933" role="row"> 
 
     <td class="mdl-data-table__cell--non-numeric">null</td> 
 
     <td class="numeric-cell">6</td> 
 
     <td class="numeric-cell">120</td> 
 
     <td class="mdl-data-table__cell--non-numeric">No</td> 
 
    </tr> 
 
    <tr class="rowEditData odd" value="7934" role="row"> 
 
     <td class="mdl-data-table__cell--non-numeric">null hello</td> 
 
     <td class="numeric-cell">10</td> 
 
     <td class="numeric-cell">1440</td> 
 
     <td class="mdl-data-table__cell--non-numeric">No</td> 
 
    </tr> 
 
    <tr class="rowEditData even" value="7925" role="row"> 
 
     <td class="mdl-data-table__cell--non-numeric">Octagon sample</td> 
 
     <td class="numeric-cell">8</td> 
 
     <td class="numeric-cell">null</td> 
 
     <td class="mdl-data-table__cell--non-numeric">No</td> 
 
    </tr> 
 
    <tr class="rowEditData odd" value="7922" role="row"> 
 
     <td class="mdl-data-table__cell--non-numeric">pentagon</td> 
 
     <td class="numeric-cell">null</td> 
 
     <td class="numeric-cell">null</td> 
 
     <td class="mdl-data-table__cell--non-numeric">No</td> 
 
    </tr> 
 
    <tr class="rowEditData even deleted" value="7926" role="row"> 
 
     <td class="mdl-data-table__cell--non-numeric">Pentagon</td> 
 
     <td class="numeric-cell">null</td> 
 
     <td class="numeric-cell">null</td> 
 
     <td class="mdl-data-table__cell--non-numeric">No</td> 
 
    </tr> 
 
    <tr class="rowEditData odd" value="7920" role="row"> 
 
     <td class="mdl-data-table__cell--non-numeric">square-test</td> 
 
     <td class="numeric-cell">4</td> 
 
     <td class="numeric-cell">null</td> 
 
     <td class="mdl-data-table__cell--non-numeric">No</td> 
 
    </tr> 
 
    <tr class="rowEditData even" value="7927" role="row"> 
 
     <td class="mdl-data-table__cell--non-numeric">Square</td> 
 
     <td class="numeric-cell">null</td> 
 
     <td class="numeric-cell">null</td> 
 
     <td class="mdl-data-table__cell--non-numeric">No</td> 
 
    </tr> 
 
    </tbody> 
 
</table>

Answer 1

嘗試這個排序插件數據表：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; 
} 
}); 

}()); 

Answer 2

你必須每一行的類"non-numeric"，它告訴這個奇怪的插件不排序這些列作爲數字。刪除該字符串。