CODEWITHSUNDEEP
javascriptsortingwhitespace
Matthew Sirkin
Matthew Sirkin

Reputation: 93

Javascript sorting numbers in an HTML table with different number of digits

[EDIT: These are all great methods for changing the way I sort. However I can't change the sorting method, unless one of you knows how to do that. In my JS there is a very long sorting algorithm that I didn't write. I'm not really sure how I would edit it to incorporate any of these sorting methods. Hence why I asked for a way to make them sort alphabetically by just changing the strings themselves.]

I have a table that has a sort button and everything works except for 1 column.

How do I sort 6", 12", and 18"?

They sort in the order 6" 18" 12" because of the quotes. I dont really want to remove the quotes and specify in the header that it is measured in inches... and I dont want to put a 0 before the 6 (which would also work). Ideally I want to put a space before the 6, but that space gets ignored for sorting. Anyone have any thoughts?

My inputs are just defined in a simple array:

var paras1 = [
  ["K"],
  ["-270°C to 1372°C, –454°F to 2501°F"],
  ['0.125 (1/8")', '0.1875 (3/16")', '0.250 (1/4")'],
  ['6"', '12"', '18"'], //-------THE LINE THAT I CARE ABOUT-------
  ["316SS"],
  ["Grounded", "Ungrounded", "Exposed"],
];

Ive tried the following:

 [' 6"', '12"', '18"'] //with space doesnt work
 ['06"', '12"', '18"'] //with 0 works and looks ugly
 ['6', '12', '18']     //works but not what i want

If you have some creative characters that would help sort, you can try them out on line 486 if that helps, https://jsfiddle.net/msirkin/duw5nyqe/9/

Upvotes: 0

Views: 537

Answers (2)

Javier Rey
Javier Rey

Reputation: 1620

Ensure strings are compared as numbers by setting a comparision function in the sort.

Maybe you have a better way of adding a class name to your table columns, but in your fiddle demo: https://jsfiddle.net/msirkin/duw5nyqe/9/ I added the 'sorttable_numeric' class programmatically for column Length, in line 622, right before eo_head_row.appendChild(headCell). You can add more params like this for other columns that need to be sorted numerically: (k == "para4" || k == "para5").

if (k == "para5") {headCell.className += ' sorttable_numeric';}

Upvotes: 1

Nina Scholz
Nina Scholz

Reputation: 386578

You could use sorting with map and use the numerical values.

// the array to be sorted
var list = ['18"', '6"', '12"'];

// temporary array holds objects with position and sort-value
var mapped = list.map(function(el, i) {
    return { index: i, value: el.match(/\d+(?=")/) };
});

// sorting the mapped array containing the reduced values
mapped.sort(function(a, b) {
    return a.value - b.value;
});

// container for the resulting order
var result = mapped.map(function(el){
    return list[el.index];
});

console.log(result);

Or use sort directly with the numerical values.

// the array to be sorted
var list = ['18"', '6"', '12"'];

list.sort(function(a, b) {
    function getNumber(s) { return s.match(/\d+(?=")/); }
    return getNumber(a) - getNumber(b);
});

console.log(list);

Upvotes: 1

Related Questions