Как добавить сортировку таблиц на сайте

Сортировка таблиц является важным функционалом на сайте, особенно когда у вас есть большое количество данных, которые нужно упорядочить. В этой статье мы рассмотрим, как легко добавить сортировку таблиц на вашем сайте с помощью JavaScript и jQuery.

Шаг 1: Создание таблицы

Для начала создадим простую HTML-таблицу с данными, которые мы хотим сортировать. Вот пример таблицы:

<table id="myTable">
  <thead>
    <tr>
      <th>Имя</th>
      <th>Возраст</th>
      <th>Город</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Алексей</td>
      <td>25</td>
      <td>Москва</td>
    </tr>
    <tr>
      <td>Иван</td>
      <td>30</td>
      <td>Санкт-Петербург</td>
    </tr>
    <!-- Добавьте больше строк с данными по аналогии -->
  </tbody>
</table>

Шаг 2: Добавление JavaScript и jQuery

Чтобы добавить сортировку, нам понадобится подключить библиотеку jQuery. Добавьте следующий код перед закрывающим тегом </body>:

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

Теперь мы можем использовать jQuery для сортировки нашей таблицы. Создайте новый файл с именем table-sort.js и добавьте следующий код:

$(document).ready(function() {
  $('th').click(function() {
    var table = $(this).parents('table').eq(0);
    var rows = table.find('tr:gt(0)').toArray().sort(comparer($(this).index()));
    this.asc = !this.asc;
    if (!this.asc) {
      rows = rows.reverse();
    }
    table.children('tbody').empty().html(rows);
  });
});

function comparer(index) {
  return function(a, b) {
    var valA = getCellValue(a, index);
    var valB = getCellValue(b, index);
    return $.isNumeric(valA) && $.isNumeric(valB) ? valA - valB : valA.localeCompare(valB);
  };
}

function getCellValue(row, index) {
  return $(row).children('td').eq(index).text();
}

Подключите этот файл к вашему HTML-документу перед закрывающим тегом </body>:

<script src="table-sort.js"></script>

Шаг 3: Проверка работы сортировки

Теперь у вас есть всё необходимое для сортировки таблицы. Откройте ваш сайт в браузере и нажмите на заголовки столбцов таблицы. Вы увидите, что данные сортируются в порядке возрастания и убывания.

😉 Вот так просто можно добавить сортировку таблиц на вашем сайте с помощью jQuery. Надеюсь, эта информация поможет вам в веб-разработке. Удачи в обучении!

Если вы хотите углубить свои знания в области веб-разработки, рекомендую обратиться в школу для получения профессионального образования.