Как отсортировать данные в динамически созданной таблице?

Question

[Boris]

У меня есть динамически созданная таблица, которую я заполнил данными из массива объектов. Мне нужно чтобы при клике на кнопку вызывалась функция сортирующая данные и перезапишет в столбец их. Как такое реализовать? Или возможно есть лучший способ отсортировать данные в столбце.

const sortButton = document.querySelector(".sort_btn");
  const sortname = document.querySelector("#name");
  sortButton.onclick = function (e) {
    let targetItem = e.target;
    for (let i of arr) {
      if (targetItem.closest("#sort_name")) {
        Sorting(arr, "name", 1);
        sortname.innerHTML = `<td id="full_name">${i.full_name}</td>`;
      }
    }
  };

Comments

[Boris]

Функция сортировки:

function Sorting(arr, sortBy, direction) {
  switch (sortBy) {
    case "age":
      return arr.sort((a, b) => (a.age > b.age ? direction : -direction));
    case "name":
      return arr.sort((a, b) => (a.full_name > b.full_name ? direction : -direction));
    case "b_day":
      return arr.sort((a, b) => (a.b_day > b.b_day ? direction : -direction));
    case "country":
      return arr.sort((a, b) => (a.country > b.country ? direction : -direction));
    default:
      return "missing parametr";
  }
}

Answer 1

[Elvis]

Я использую вот такой скрипт для сортировки таблицы

function sorttbl(head, selector, numrow, dtype) {
    let table, rows, switching, i, x, y, xx, yy, shouldSwitch, dir, switchcount = 0;
    table = document.querySelector(selector);
    switching = true;
    dir = "asc";
    while (switching) {
        switching = false;
        rows = table.rows;
        for (i = head; i < (rows.length - 1); i++) {
            shouldSwitch = false;
            x = rows[i].getElementsByTagName("TD")[numrow];
            y = rows[i + 1].getElementsByTagName("TD")[numrow];
            if (dtype == "num") {
                xx = parseFloat(x.innerHTML);
                yy = parseFloat(y.innerHTML);
            } else {
                xx = x.innerHTML.toLowerCase();
                yy = y.innerHTML.toLowerCase();
            }
            if (dir == "asc") {
                if (xx > yy) {
                    shouldSwitch = true;
                    break;
                }
            } else if (dir == "desc") {
                if (xx < yy) {
                    shouldSwitch = true;
                    break;
                }
            }
        }
        if (shouldSwitch) {
            rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
            switching = true;
            switchcount++;
        } else {
            if (switchcount == 0 && dir == "asc") {
                dir = "desc";
                switching = true;
            }
        }
    }
}

Далее где нужно вешаю вызов функции(обычно на заголовках таблицы).
Поясню параметры:
head - если таблица имеет заголовок, то ставим 1, иначе 0
selector - селектор CSS для таблицы который нужно сортировать, именно для тега table
numrow - номер столбца по которому будет сортировка в таблице, начинается отсчет с 0
dtype - тип данных в столбце. если цифры, то ставим 'num', если текст, то 'text'

Для примера: https://codepen.io/Dr_Elvis/pen/KKQmWKp