Sort two tables in same function using Javascript

Question

I need to sort these two tables in the same function. When I click name in first table so it will sort second table also by name.

I have this function where can sort table and it is working, but it only sorts one table.

What changes are needed to sort both tables?

 function sortTable(table, column, asc = true) {
        const dirModifier = asc ? 1 : -1;
        const tBody = table.tBodies[0];
        const rows = Array.from(tBody.querySelectorAll("tr"));
    
        const sortedRows = rows.sort((a, b) => {
            const aColText = a.querySelector(`td:nth-child(${ column + 1 })`).textContent.trim();
            const bColText = b.querySelector(`td:nth-child(${ column + 1 })`).textContent.trim();
    
            return aColText > bColText ? (1 * dirModifier) : (-1 * dirModifier);
        });
    
        while (tBody.firstChild) {
            tBody.removeChild(tBody.firstChild);
        }
    
        tBody.append(...sortedRows);
    
        table.querySelectorAll("th").forEach(th => th.classList.remove("th-sort-asc", "th-sort-desc"));
        table.querySelector(`th:nth-child(${ column + 1})`).classList.toggle("th-sort-asc", asc);
        table.querySelector(`th:nth-child(${ column + 1})`).classList.toggle("th-sort-desc", !asc);
    }
    
    document.querySelectorAll(".table-sortable th").forEach(headerCell => {
        headerCell.addEventListener("click", () => {
            const tableElement = headerCell.parentElement.parentElement.parentElement;
            const headerIndex = Array.prototype.indexOf.call(headerCell.parentElement.children, headerCell);
            const currentIsAscending = headerCell.classList.contains("th-sort-asc");
    
            sortTable(tableElement, headerIndex, !currentIsAscending);
        });
    });

<table class="table-sortable">
    <thead>
      <tr>
        <th>name</th>
        <th>adress</th>
        <th>Age</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Tom</td>
        <td>Oslo</td>
        <td>35</td>
      </tr>
      <tr>
        <td>Per</td>
        <td>London</td>
        <td>29</td>
      </tr>
      <tr>
        <td>Hary</td>
        <td>Madrid</td>
        <td>30</td>
      </tr>
    </tbody>
  </table>
<table class="table-sortable">
    <thead>
      <tr>
        <th>name</th>
        <th>adress</th>
        <th>Age</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Tom</td>
        <td>Oslo</td>
        <td>35</td>
      </tr>
      <tr>
        <td>Per</td>
        <td>London</td>
        <td>29</td>
      </tr>
      <tr>
        <td>Hary</td>
        <td>Madrid</td>
        <td>30</td>
      </tr>
    </tbody>
  </table>

Kaan · Accepted Answer · 2021-07-03 09:36:46Z

1

You can run sortTable function for each table.

var tables =document.getElementsByClassName("table-sortable");
sortTable(tables[0], headerIndex, !currentIsAscending);
sortTable(tables[1], headerIndex, !currentIsAscending);

 function sortTable(table, column, asc = true) {
        const dirModifier = asc ? 1 : -1;
        const tBody = table.tBodies[0];
        const rows = Array.from(tBody.querySelectorAll("tr"));
    
        const sortedRows = rows.sort((a, b) => {
            const aColText = a.querySelector(`td:nth-child(${ column + 1 })`).textContent.trim();
            const bColText = b.querySelector(`td:nth-child(${ column + 1 })`).textContent.trim();
    
            return aColText > bColText ? (1 * dirModifier) : (-1 * dirModifier);
        });
    
        while (tBody.firstChild) {
            tBody.removeChild(tBody.firstChild);
        }
    
        tBody.append(...sortedRows);
    
        table.querySelectorAll("th").forEach(th => th.classList.remove("th-sort-asc", "th-sort-desc"));
        table.querySelector(`th:nth-child(${ column + 1})`).classList.toggle("th-sort-asc", asc);
        table.querySelector(`th:nth-child(${ column + 1})`).classList.toggle("th-sort-desc", !asc);
    }
    
    document.querySelectorAll(".table-sortable th").forEach(headerCell => {
        headerCell.addEventListener("click", () => {
            const tableElement = headerCell.parentElement.parentElement.parentElement;
            const headerIndex = Array.prototype.indexOf.call(headerCell.parentElement.children, headerCell);
            const currentIsAscending = headerCell.classList.contains("th-sort-asc");
            var tables =document.getElementsByClassName("table-sortable");
            sortTable(tables[0], headerIndex, !currentIsAscending);
      sortTable(tables[1], headerIndex, !currentIsAscending);
      
        });
    });

<table class="table-sortable">
    <thead>
      <tr>
        <th>name</th>
        <th>adress</th>
        <th>Age</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Tom</td>
        <td>Oslo</td>
        <td>35</td>
      </tr>
      <tr>
        <td>Per</td>
        <td>London</td>
        <td>29</td>
      </tr>
      <tr>
        <td>Hary</td>
        <td>Madrid</td>
        <td>30</td>
      </tr>
    </tbody>
  </table>
<table class="table-sortable">
    <thead>
      <tr>
        <th>name</th>
        <th>adress</th>
        <th>Age</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Tom</td>
        <td>Oslo</td>
        <td>35</td>
      </tr>
      <tr>
        <td>Per</td>
        <td>London</td>
        <td>29</td>
      </tr>
      <tr>
        <td>Hary</td>
        <td>Madrid</td>
        <td>30</td>
      </tr>
    </tbody>
  </table>

answered Jul 3, 2021 at 9:36

Kaan

1298 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

keymasterr Over a year ago

No need to hardcode number of tables:

var tables = document.querySelectorAll(".table-sortable"); tables.forEach(tbl => {   sortTable(tbl, headerIndex, !currentIsAscending); });

Kaan Over a year ago

forEach does not work for HTMLCollection. It is just for arrays. It can made with for loop or jquery's each function.

keymasterr Over a year ago

That's why I defined tables variable with querySelectorAll

Kaan Over a year ago

I missed it. Sorry

Collectives™ on Stack Overflow

Sort two tables in same function using Javascript

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related