CODEWITHSUNDEEP
javascriptjqueryhtml-table
GeekyOwl
GeekyOwl

Reputation: 79

Sorting only considers the first digit when the table is sorted with Javascript

I have a table with total points. I have javascript which sorts the table based on the total but it says: if points are 1,25,6,4 - sorting considers only the first digit. So it sorts by 1,25,4,6.

W1, W2, W3 ...columns are dynamically created, and also the rows.

Please help

const sortTotal = () => {
  const tbl = [...document.getElementsByClassName("fl-table")][0];
  const tbody = [...tbl.tBodies][0];
  const oObjects = [];

  [...tbody.rows].forEach(row => {
    const cells = [...row.cells];
    const obj = [...row.cells].map(cell => {
      return cell.innerHTML;
    });
    oObjects.push(obj);
  });

  oObjects.sort((a, b) => a[a.length - 1] > b[b.length - 1] ? 1 : -1);

  [...tbody.rows].forEach((row, i) => {
    [...row.cells].forEach((cell, j) => {
      cell.innerHTML = oObjects[i][j];
    });
  });
}
<button onClick="sortTotal()">
  Sort</button>
</button>
<table class="fl-table">
  <thead>
    <tr>
      <th>Player</th>
      <th>Player Name</th>
      <th>W1</th>
      <th>W2</th>
      <th>Total</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="agl-profile-img-new"><img src="https://via.placeholder.com/70C/O https://placeholder.com/"></td>
      <td>Heather Rankin</td>
      <td>4</td>
      <td>21</td>
      <td>55</td>
    </tr>
    <tr>
      <td class="agl-profile-img-new"><img src="https://via.placeholder.com/70C/O https://placeholder.com/"></td>
      <td>Stephen Puopolo</td>
      <td>3</td>
      <td>1</td>
      <td>4</td>
    </tr>
    <tr>
      <td class="agl-profile-img-new"><img src="https://via.placeholder.com/70C/O https://placeholder.com/"></td>
      <td>Latheesh V M V</td>
      <td>2</td>
      <td>26</td>
      <td>4</td>
    </tr>
  </tbody>
</table>

Upvotes: 0

Views: 348

Answers (1)

Md Sabbir Alam
Md Sabbir Alam

Reputation: 5054

Try converting the string numbers to actual numbers,

oObjects.sort((a, b) => parseInt(a[a.length - 1]) - parseInt(b[b.length - 1]));

Notice the parseInt method and also notice that I have removed the ternary operator. There is a reason for that. The sort method expect actually any of the three following output.

1: a should come after b

0: the order should not change

-1: a should come before b

You can read more about that here.

const sortTotal = () => {
  const tbl = [...document.getElementsByClassName("fl-table")][0];
  const tbody = [...tbl.tBodies][0];
  const oObjects = [];

  [...tbody.rows].forEach(row => {
    const cells = [...row.cells];
    const obj = [...row.cells].map(cell => {
      return cell.innerHTML;
    });
    oObjects.push(obj);
  });

  oObjects.sort((a, b) => parseInt(a[a.length - 1]) - parseInt(b[b.length - 1]));

  [...tbody.rows].forEach((row, i) => {
    [...row.cells].forEach((cell, j) => {
      cell.innerHTML = oObjects[i][j];
    });
  });
}
<button onClick="sortTotal()">
  Sort</button>
</button>
<table class="fl-table">
  <thead>
    <tr>
      <th>Player</th>
      <th>Player Name</th>
      <th>W1</th>
      <th>W2</th>
      <th>Total</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="agl-profile-img-new"><img src="https://via.placeholder.com/70C/O https://placeholder.com/"></td>
      <td>Heather Rankin</td>
      <td>4</td>
      <td>21</td>
      <td>55</td>
    </tr>
    <tr>
      <td class="agl-profile-img-new"><img src="https://via.placeholder.com/70C/O https://placeholder.com/"></td>
      <td>Stephen Puopolo</td>
      <td>3</td>
      <td>1</td>
      <td>4</td>
    </tr>
    <tr>
      <td class="agl-profile-img-new"><img src="https://via.placeholder.com/70C/O https://placeholder.com/"></td>
      <td>Latheesh V M V</td>
      <td>2</td>
      <td>26</td>
      <td>4</td>
    </tr>
  </tbody>
</table>

Upvotes: 1

Related Questions