Array order in sorted table

Question

I want to create a script that sorts an HTML table based on the column header you click on using the mouse. I am trying to implement the answer given here:

https://stackoverflow.com/a/14267838/330663

I have made slight modifications so now the sorting function looks like this:

var COLUMNS_NUMBER = 4;

var myArrayColumns = [3,2,1,0];

function sortDataTable(arrayColumns, asc)
{
    for (var i = 0, n = COLUMNS_NUMBER; i < n; i++)
    {
//      var thisColumn = arrayColumns[i];
        var thisColumn = arrayColumns.reverse()[i];
        DATA_TABLE = DATA_TABLE.sort(function(a,b)
        {
            if (asc)
            {
                return (a[thisColumn].toLowerCase() > b[thisColumn].toLowerCase()) ? 1 : -1;
            }
            else
            {
                return (a[thisColumn].toLowerCase() < b[thisColumn].toLowerCase()) ? 1 : -1;
            }
        });
    }
}

I call the function like this:

sortDataTable(myArrayColumns, true);

where 3, 2, 1, 0 are the column numbers in the data.

However it seems like it always sorts according to column 0, even if I reverse the order of myArrayColumns. Why is this the case?

Here is some sample data:

var DATA_TABLE =
[
    ["ASCII/Unicode/HTML Codes","Reference","091","PC: <span style=\"font-size:smaller;\"><a target=\"_blank\" href=\"./keyboard-diagram-ascii-unicode-html-codes.php?sty=15&lay=1&fmt=0\">US 104 Key (ANSI)</a></span><br/>"],
    ["ActionScript 3.0 Key Codes","Reference","092","PC: <span style=\"font-size:smaller;\"><a target=\"_blank\" href=\"./keyboard-diagram-actionscript-3-0-key-codes.php?sty=15&lay=1&fmt=0\">US 104 Key (ANSI)</a></span><br/>"],
    ["Age of Decadence, The","Roleplaying","156","PC: <span style=\"font-size:smaller;\"><a target=\"_blank\" href=\"./keyboard-diagram-age-of-decadence-the.php?sty=15&lay=1&fmt=0\">US 104 Key (ANSI)</a></span><br/>"],
    ["Aliens versus Predator","Action","002","PC: <span style=\"font-size:smaller;\"><a target=\"_blank\" href=\"./keyboard-diagram-aliens-versus-predator.php?sty=15&lay=1&fmt=0\">US 104 Key (ANSI)</a></span><br/>"],
    ["Allegiance","Simulation","014","PC: <span style=\"font-size:smaller;\"><a target=\"_blank\" href=\"./keyboard-diagram-allegiance.php?sty=15&lay=1&fmt=0\">US 104 Key (ANSI)</a></span><br/>"],
    ["American McGee's Alice","Action","003","PC: <span style=\"font-size:smaller;\"><a target=\"_blank\" href=\"./keyboard-diagram-american-mcgees-alice.php?sty=15&lay=1&fmt=0\">US 104 Key (ANSI)</a></span><br/>"],
    ["Anachronox","Roleplaying","140","PC: <span style=\"font-size:smaller;\"><a target=\"_blank\" href=\"./keyboard-diagram-anachronox.php?sty=15&lay=1&fmt=0\">US 104 Key (ANSI)</a></span><br/>"],
    ["Apple Virtual Key Codes","Reference","090","Mac: <span style=\"font-size:smaller;\"><a target=\"_blank\" href=\"./keyboard-diagram-apple-virtual-key-codes.php?sty=15&lay=5&fmt=0\">US 109 Key (A1048)</a>, <a target=\"_blank\" href=\"./keyboard-diagram-apple-virtual-key-codes.php?sty=15&lay=6&fmt=0\">US 109 Key (A1243)</a>, <a target=\"_blank\" href=\"./keyboard-diagram-apple-virtual-key-codes.php?sty=15&lay=7&fmt=0\">UK 110 Key (A1048)</a></span><br/>"],
    ["Blank Starter","Reference","184","PC: <span style=\"font-size:smaller;\"><a target=\"_blank\" href=\"./keyboard-diagram-blank-starter.php?sty=15&lay=1&fmt=0\">US 104 Key (ANSI)</a>, <a target=\"_blank\" href=\"./keyboard-diagram-blank-starter.php?sty=15&lay=3&fmt=0\">DE 105 Key (ISO)</a>, <a target=\"_blank\" href=\"./keyboard-diagram-blank-starter.php?sty=15&lay=4&fmt=0\">FR 105 Key (ISO)</a>, <a target=\"_blank\" href=\"./keyboard-diagram-blank-starter.php?sty=15&lay=8&fmt=0\">UK 105 Key (ISO)</a>, <a target=\"_blank\" href=\"./keyboard-diagram-blank-starter.php?sty=15&lay=9&fmt=0\">ES 105 Key (ISO)</a>, <a target=\"_blank\" href=\"./keyboard-diagram-blank-starter.php?sty=15&lay=10&fmt=0\">US 104 Key (Dvorak)</a></span><br/>Mac: <span style=\"font-size:smaller;\"><a target=\"_blank\" href=\"./keyboard-diagram-blank-starter.php?sty=15&lay=5&fmt=0\">US 109 Key (A1048)</a>, <a target=\"_blank\" href=\"./keyboard-diagram-blank-starter.php?sty=15&lay=6&fmt=0\">US 109 Key (A1243)</a>, <a target=\"_blank\" href=\"./keyboard-diagram-blank-starter.php?sty=15&lay=7&fmt=0\">UK 110 Key (A1048)</a></span><br/>"]
]

Thanks.

It seems the sorting function works for all the columns, except column 3 which does not sort properly under any conditions. How do browsers behave when they encounter mixed text/HTML data? — posfan12, Mar 30 '19 at 22:10
The problem actually has to do with parsing/stripping HTML tags, answered here: https://stackoverflow.com/questions/822452/strip-html-from-text-javascript/47140708#47140708 — posfan12, Mar 30 '19 at 22:35
I'm voting to close this question as off-topic because the problem was ultimately unrelated to arrays and table sorting. — posfan12, Apr 01 '19 at 05:28

ABC · Answer 1 · 2019-03-30T21:50:56.827

3

This might be an easier idea.

var myArrayColumns = [3, 2, 1, 0];

function sortDataTable(arrayColumns, asc) {
  if (asc) {
    return arrayColumns.sort();
  } else {
    return arrayColumns.sort().reverse();
  }
}

console.log(sortDataTable(myArrayColumns))

edited Mar 30 '19 at 21:50

answered Mar 30 '19 at 21:43

ABC

2,068
1
10
21

1

Those brilliant Saturday warriors... https://media1.giphy.com/media/GQnsaAWZ8ty00/giphy.gif – Tcraw Mar 30 '19 at 21:47
No, the table I am trying to sort is called `DATA_TABLE`. – posfan12 Mar 30 '19 at 21:48
2

@posfan12 We see that now, but you should have waited to think of your original post before submitting. So we do not have to follow all of your edits, guessing what you might need. – ABC Mar 30 '19 at 21:49

Array order in sorted table

1 Answers1