I'm using the jQuery script "sortElements" on my tables to sort their columns, but I noticed that the sorting in numerical columns doesn't work. The result of the sorting on them is something like "100 20 250 30". I don't understand how to solve this problem. Can you help me, please?
This is the "sortElements" script: https://j11y.io/javascript/sorting-elements-with-jquery/
This is the script that I'm using in my page:
var table = $('table');
$('table th')
.wrapInner('')
.each(function(){
var th = $(this),
thIndex = th.index(),
inverse = false;
th.click(function(){
table.find('td').filter(function(){
return $(this).index() === thIndex;
}).sortElements(function(a, b){
if( $.text([a]) == $.text([b]) )
return 0;
return $.text([a]) > $.text([b]) ?
inverse ? -1 : 1
: inverse ? 1 : -1;
}, function(){
// parentNode is the element we want to move
return this.parentNode;
});
inverse = !inverse;
});
});
You're currently comparing strings, and strings are compared lexicographically, which means that, when you're talking numbers as strings, they're arranged in the order of their digits' greater values, rather than their actual value. Essentially, sorting strings containing numbers gets all the 1
s first, and then if there are multiple numbers beginning with 1
, they look at the next digit, and so on. See these examples:
Demo 1:
var numbers = ["2", "4", "3", "1"];
numbers.sort((a, b) => a > b);
console.log(numbers);
Here, the numbers are all single-digit, which means that they'll be arranged the correct way.
Demo 2:
var numbers = ["1", "4", "7", "12"];
numbers.sort((a, b) => a > b);
console.log(numbers);
Here, we have the single-digit numbers 1
, 4
and 7
, which are sorted in the correct order, but we also have 12
, which is placed after 1
. This is because its first digit is a 1
, same as the 1
value, so the second digit of both numbers are compared. Since 2
is greater than the second digit of 1
, which is nothing, it's sorted after 1
.
Demo 3:
var numbers = ["10", "1", "1.3", "5", "76", "6001"];
numbers.sort((a, b) => a > b);
console.log(numbers);
In this example, you can see that 1
is sorted first, as there's no second digit. The next item after 1
is 1.3
, and after that is 10
, which means that decimal points are "smaller" in lexicographical terms than 0
s.
What you should do is convert what you're comparing to numbers instead like so:
sortElements(function(a, b){
a = parseInt(a);
b = parseInt(b);
if( $.text([a]) == $.text([b]) )
return 0;
return $.text([a]) > $.text([b]) ? inverse ? -1 : 1 : inverse ? 1 : -1;
}
Hopefully this helps!
How to create a pipeline to publish a jar file to sharepoint?
Calling external api from spring boot with multipart/form-data
Why does OpenCV's detectMultiScale3 function hang my program?
How to modify text on a TextArea object from outside of it's class?
Why docusign API not providing x-docusign-signature in request header?
Android Studio - Group conversion of field to local variable
There were a couple of similar threads - but they are all related to event propagation, but my requirement is somewhat differentHere's my HTML:
A Company must deliver the number of packages in City
I am using SQLite database in my Android App and storing images is not the problem, images are storing fine inside my device gallery