I am trying to sort my data table based on custom requirement where I need to Sort first numbers , Second String and then null values at bottom of table. I have created data table where there are columns Age which has all three values. Whenever user clicks on Age , First number should be sorted then string and then null values at bottom. I have used method and override sort with $.fn.dataTable.ext.oSort
how Can I Sort first on numeric values then Text and then push null values to bottom.
I provided Link below for my Test Case with Data. Js Fiddle : Js Fiddle
Code :
$(document).ready(function() {
$.fn.dataTable.ext.errMode = 'none'; // stop pop-up alerts from datatable errors.
$.fn.dataTable.ext.oSort['nullsort-asc'] = function(a,b) {
console.log("asc val of:" + a + ":val of y:" + b);
//return sortNumbersIgnoreText(a, b, Number.POSITIVE_INFINITY);
if(a == "")
return 1;
if(b == "")
return -1;
return ((a < b) ? -1 : ((a > b) ? 1 : 0));
};
$.fn.dataTable.ext.oSort['nullsort-desc'] = function(a,b) {
if(a == "")
return 1;
if(b == "")
return -1;
return ((a < b) ? 1 : ((a > b) ? -1 : 0));
// return sortNumbersIgnoreText(a, b, Number.NEGATIVE_INFINITY) * -1;
};
$('#example').DataTable({
//"aaSorting": [[3,'asc']],
columnDefs: getColumnDef()
});
} );
function getColumnDef(){
return [
{ type: 'nullsort', targets: 3 },
{ type: 'nullsort', targets: 4}
];
}
Html:
<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Salary</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Salary</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td></td>
<td>$320,800</td>
</tr>
<tr>
<td>James Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td></td>
<td>$320,800</td>
</tr>
<tr>
<td>Garrett Winters</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>63</td>
<td></td>
</tr>
<tr>
<td>Cedric Kelly</td>
<td>Senior Javascript Developer</td>
<td>Edinburgh</td>
<td>22</td>
<td>$433,060</td>
</tr>
<tr>
<td>Airi Satou</td>
<td>Accountant</td>
<td>Tokyo</td>
<td></td>
<td>$162,700</td>
</tr>
<tr>
<td>Brielle Williamson</td>
<td>Integration Specialist</td>
<td>New York</td>
<td>61</td>
<td></td>
</tr>
<tr>
<td>Herrod Chandler</td>
<td>Sales Assistant</td>
<td>San Francisco</td>
<td>59</td>
<td>$137,500</td>
</tr>
<tr>
<td>Rhona Davidson</td>
<td>Integration Specialist</td>
<td>Tokyo</td>
<td>55</td>
<td>$327,900</td>
</tr>
<tr>
<td>Colleen Hurst</td>
<td>Javascript Developer</td>
<td>San Francisco</td>
<td>39</td>
<td>$205,500</td>
</tr>
<tr>
<td>Sonya Frost</td>
<td>Software Engineer</td>
<td>Edinburgh</td>
<td>A</td>
<td>$103,600</td>
</tr>
<tr>
<td>Jena Gaines</td>
<td>Office Manager</td>
<td>London</td>
<td>30</td>
<td>$90,560</td>
</tr>
<tr>
<td>ADam Gaines</td>
<td>Office Manager</td>
<td>London</td>
<td>Denis</td>
<td>$90,560</td>
</tr>
<tr>
<td>nancy Gaines</td>
<td>Office Manager</td>
<td>London</td>
<td>zibra</td>
<td>$90,560</td>
</tr>
<tr>
<td>James Gaines</td>
<td>Office Manager</td>
<td>London</td>
<td>capital</td>
<td>$90,560</td>
</tr>
</tbody>
</table>
A couple comments first:
===
is used for a strict equal and often
preferred.console.log('' == null);
will output false.Then for your question:
You can test if something is a number with isNaN()
. This count both let a = "123"
and let a = 123
as numbers. You could also use typeof to check the data type.
Then I would do something kind of like this.
customSort = (a,b) => {
const isNumA = !isNaN(a);//check if a is a number
const isNumB = !isNaN(b);//check if b is a number
if(!a && !b){return 0;}//if both are null return 0; don't need to change order
else if(!a){return 1;}//if a is null and b isn't return 1
else if(!b){return -1;} //if b is null and a isn't return -1
else if(isNumA && isNumB){return Number(a) - Number(b);}//if they are both numbers do a number sort
else if(isNumA){return -1;}//if a is a number and b isn't return 1
else if(isNumB){return 1;}//if b is a number and a isn't return -1
else {return (a).localeCompare(b);}//neither are number and neither are null, do a standard string sort
}
Then the sort is used like this:
const data = ['asdf', 'zxcv', null, '532', 234, null];
data.sort(customSort);
This is not fully tested but it works in my head and should be fairly close.