How can I order numerical columns with jQuery “sortElements” plugin?

36
December 21, 2018, at 3:20 PM

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;
    });
});
Answer 1

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 1s 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 0s.

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!

READ ALSO
HTML-Angular 6 Stop parent DOM element event from being fired by one of the child elements

HTML-Angular 6 Stop parent DOM element event from being fired by one of the child elements

There were a couple of similar threads - but they are all related to event propagation, but my requirement is somewhat differentHere's my HTML:

25
How to create Biker's Optimize Route for delivering Packages using Nodejs

How to create Biker's Optimize Route for delivering Packages using Nodejs

A Company must deliver the number of packages in City

18
How to make more secure an Android Application , security problem .

How to make more secure an Android Application , security problem .

I am using SQLite database in my Android App and storing images is not the problem, images are storing fine inside my device gallery

46