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!
Right way to add button to page with onClick from Chrome Extension
Anchor link not working after 1 click other questions have not explained this issue [on hold]
Symfony, proopgh, event soursing Error 42S02. Maybe the event streams table is not setup?
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