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 `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!

POPULAR ONLINE

- search for elements in a list 10629 visits
- In Chrome 55, prevent showing Download button for HTML 5 video 8469 visits
- typescript: tsc is not recognized as an internal or external command, operable program or batch file 6601 visits
- Adding methods to es6 child class 6047 visits
- RxJS5 - error - TypeError: You provided an invalid object where a stream was expected 5882 visits
- Ionic 2 - how to make ion-button with icon and text on two lines? 4800 visits
- Conflict: Multiple assets emit to the same filename 4651 visits

READ ALSO

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