JS table sorting fail on Chrome-CodePudding

I am working on a website that allow people to participate in an online race on erg rowers.

I display a large table (600 rows) containing rank, name and other fields, and I want to allow visitors to sort it on the fly (client-side JS).
I set up a function that works really well on Firefox, but it doesn't work at all on Chrome browsers.

I really don't see what part of my code can bring this problem, this is why I reach to you for some help !

My html code looks like:

<table>
  <thead>
    <tr>
      <th>Rank</th>
      <th>Name</th>
      <th>...</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>USER 1</td>
      <td>...</td>
    </tr>
  </tbody>
</table>

And my JavaScript:

for (const table of document.getElementsByTagName('table')) {
  const headers = table.querySelectorAll('thead tr th');
  for (let i = 0; i < headers.length-1; i  ) {
    headers[i].addEventListener('click', sortTable(i, table.id));
  }
}

function sortTable(n, tableId) {
  return () => {
    const table = document.getElementById(tableId);

    const newTable = document.createElement('table');
    newTable.className = table.className;
    newTable.id = table.id;

    const tbody = document.createElement('tbody');
    const thead = document.createElement('thead');

    const rows = Array.from(table.rows);
    thead.appendChild(rows.shift());
    const th = thead.getElementsByTagName('th');

    const dir = th[n].className == 'asc' ? 'desc' : 'asc';

    rows.sort((a, b) => {
      let x = a.getElementsByTagName('td')[n].innerText.toLowerCase();
      let y = b.getElementsByTagName('td')[n].innerText.toLowerCase();

      const compare = x.localeCompare(y, 'fr', { sensitivity: 'base', numeric: true });

      return ((dir == 'asc' && compare > 0) || (dir == 'desc' && compare < 0));
    })
      .forEach(row => tbody.appendChild(row));

    for (const header of th) {
      header.className = '';
    }

    th[n].className = dir;

    newTable.appendChild(thead);
    newTable.appendChild(tbody);

    table.parentNode.replaceChild(newTable, table);
  };
}

Thanks for your help !

CodePudding user response：

Your comparison function passed to .sort() is returning a boolean:

return ((dir == 'asc' && compare > 0) || (dir == 'desc' && compare < 0));

However, the .sort() method expects this comparison function to return a number. I suspect that Firefox is being forgiving or doing some type conversion for you where Chrome is not. If I change it to:

return ((dir == 'asc' && 0   compare) || (dir == 'desc' && 0 - compare));

...it will sort as expected.

for (const table of document.getElementsByTagName('table')) {
  const headers = table.querySelectorAll('thead tr th');
  for (let i = 0; i < headers.length - 1; i  ) {
    headers[i].addEventListener('click', sortTable(i, table.id));
  }
}

function sortTable(n, tableId) {
  return () => {
    const table = document.getElementById(tableId);

    const newTable = document.createElement('table');
    newTable.className = table.className;
    newTable.id = table.id;

    const tbody = document.createElement('tbody');
    const thead = document.createElement('thead');

    const rows = Array.from(table.rows);
    thead.appendChild(rows.shift());
    const th = thead.getElementsByTagName('th');

    const dir = th[n].className == 'asc' ? 'desc' : 'asc';

    rows.sort((a, b) => {
        let x = a.getElementsByTagName('td')[n].innerText.toLowerCase();
        let y = b.getElementsByTagName('td')[n].innerText.toLowerCase();

        const compare = x.localeCompare(y, 'fr', {
          sensitivity: 'base',
          numeric: true
        });

        return ((dir == 'asc' && 0   compare) || (dir == 'desc' &&  0 - compare));
      })
      .forEach(row => tbody.appendChild(row));

    for (const header of th) {
      header.className = '';
    }

    th[n].className = dir;

    newTable.appendChild(thead);
    newTable.appendChild(tbody);

    table.parentNode.replaceChild(newTable, table);
  };
}

<table id="mytable">
  <thead>
    <tr>
      <th>Rank</th>
      <th>Name</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>USER 1</td>
    </tr>
    <tr>
      <td>3</td>
      <td>USER 3</td>
    </tr>
    <tr>
      <td>2</td>
      <td>USER 2</td>
    </tr>
    <tr>
      <td>4</td>
      <td>USER 4</td>
    </tr>
    <tr>
      <td>5</td>
      <td>USER 5</td>
    </tr>
    <tr>
      <td>6</td>
      <td>USER 6</td>
    </tr>
    <tr>
      <td>7</td>
      <td>USER 7</td>
    </tr>
    <tr>
      <td>8</td>
      <td>USER 8</td>
    </tr>
    <tr>
      <td>9</td>
      <td>USER 9</td>
    </tr>
    <tr>
      <td>10</td>
      <td>USER 10</td>
    </tr>
    <tr>
      <td>11</td>
      <td>USER 11</td>
    </tr>
    <tr>
      <td>12</td>
      <td>USER 12</td>
    </tr>
    <tr>
      <td>13</td>
      <td>USER 13</td>
    </tr>
    <tr>
      <td>14</td>
      <td>USER 14</td>
    </tr>
    <tr>
      <td>15</td>
      <td>USER 15</td>
    </tr>
    <tr>
      <td>16</td>
      <td>USER 16</td>
    </tr>
    <tr>
      <td>17</td>
      <td>USER 17</td>
    </tr>
    <tr>
      <td>18</td>
      <td>USER 18</td>
    </tr>
    <tr>
      <td>19</td>
      <td>USER 19</td>
    </tr>
    <tr>
      <td>20</td>
      <td>USER 20</td>
    </tr>
    <tr>
      <td>21</td>
      <td>USER 21</td>
    </tr>
    <tr>
      <td>22</td>
      <td>USER 22</td>
    </tr>
    <tr>
      <td>23</td>
      <td>USER 23</td>
    </tr>
    <tr>
      <td>24</td>
      <td>USER 24</td>
    </tr>
    <tr>
      <td>25</td>
      <td>USER 25</td>
    </tr>
    <tr>
      <td>26</td>
      <td>USER 26</td>
    </tr>
    <tr>
      <td>27</td>
      <td>USER 27</td>
    </tr>
    <tr>
      <td>28</td>
      <td>USER 28</td>
    </tr>
    <tr>
      <td>29</td>
      <td>USER 29</td>
    </tr>
    <tr>
      <td>30</td>
      <td>USER 30</td>
    </tr>
  </tbody>
</table>

(For reference, here is the original version, where simply a boolean was returned, and the sorting does not work at all):

for (const table of document.getElementsByTagName('table')) {
  const headers = table.querySelectorAll('thead tr th');
  for (let i = 0; i < headers.length - 1; i  ) {
    headers[i].addEventListener('click', sortTable(i, table.id));
  }
}

function sortTable(n, tableId) {
  return () => {
    const table = document.getElementById(tableId);

    const newTable = document.createElement('table');
    newTable.className = table.className;
    newTable.id = table.id;

    const tbody = document.createElement('tbody');
    const thead = document.createElement('thead');

    const rows = Array.from(table.rows);
    thead.appendChild(rows.shift());
    const th = thead.getElementsByTagName('th');

    const dir = th[n].className == 'asc' ? 'desc' : 'asc';

    rows.sort((a, b) => {
        let x = a.getElementsByTagName('td')[n].innerText.toLowerCase();
        let y = b.getElementsByTagName('td')[n].innerText.toLowerCase();

        const compare = x.localeCompare(y, 'fr', {
          sensitivity: 'base',
          numeric: true
        });

        return ((dir == 'asc' && compare > 0) || (dir == 'desc' && compare < 0));
      })
      .forEach(row => tbody.appendChild(row));

    for (const header of th) {
      header.className = '';
    }

    th[n].className = dir;

    newTable.appendChild(thead);
    newTable.appendChild(tbody);

    table.parentNode.replaceChild(newTable, table);
  };
}

<table id="mytable">
  <thead>
    <tr>
      <th>Rank</th>
      <th>Name</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>USER 1</td>
    </tr>
    <tr>
      <td>3</td>
      <td>USER 3</td>
    </tr>
    <tr>
      <td>2</td>
      <td>USER 2</td>
    </tr>
    <tr>
      <td>4</td>
      <td>USER 4</td>
    </tr>
    <tr>
      <td>5</td>
      <td>USER 5</td>
    </tr>
    <tr>
      <td>6</td>
      <td>USER 6</td>
    </tr>
    <tr>
      <td>7</td>
      <td>USER 7</td>
    </tr>
    <tr>
      <td>8</td>
      <td>USER 8</td>
    </tr>
    <tr>
      <td>9</td>
      <td>USER 9</td>
    </tr>
    <tr>
      <td>10</td>
      <td>USER 10</td>
    </tr>
    <tr>
      <td>11</td>
      <td>USER 11</td>
    </tr>
    <tr>
      <td>12</td>
      <td>USER 12</td>
    </tr>
    <tr>
      <td>13</td>
      <td>USER 13</td>
    </tr>
    <tr>
      <td>14</td>
      <td>USER 14</td>
    </tr>
    <tr>
      <td>15</td>
      <td>USER 15</td>
    </tr>
    <tr>
      <td>16</td>
      <td>USER 16</td>
    </tr>
    <tr>
      <td>17</td>
      <td>USER 17</td>
    </tr>
    <tr>
      <td>18</td>
      <td>USER 18</td>
    </tr>
    <tr>
      <td>19</td>
      <td>USER 19</td>
    </tr>
    <tr>
      <td>20</td>
      <td>USER 20</td>
    </tr>
    <tr>
      <td>21</td>
      <td>USER 21</td>
    </tr>
    <tr>
      <td>22</td>
      <td>USER 22</td>
    </tr>
    <tr>
      <td>23</td>
      <td>USER 23</td>
    </tr>
    <tr>
      <td>24</td>
      <td>USER 24</td>
    </tr>
    <tr>
      <td>25</td>
      <td>USER 25</td>
    </tr>
    <tr>
      <td>26</td>
      <td>USER 26</td>
    </tr>
    <tr>
      <td>27</td>
      <td>USER 27</td>
    </tr>
    <tr>
      <td>28</td>
      <td>USER 28</td>
    </tr>
    <tr>
      <td>29</td>
      <td>USER 29</td>
    </tr>
    <tr>
      <td>30</td>
      <td>USER 30</td>
    </tr>
  </tbody>
</table>

CodePudding user response：

a.getElementsByTagName('td') is a pretty expensive operation, calling it during every comparison is going to be slow.

Table rows have a cells property that contains all the td and th elements, you can use that instead.

      let x = a.cells[n].innerText.toLowerCase();
      let y = b.cells[n].innerText.toLowerCase();