Сортируемая таблица Semantic-UI

Опубликовано: 17 Сентября, 2022

Semantic UI — это платформа с открытым исходным кодом, которая использует CSS и jQuery для создания отличных пользовательских интерфейсов. Это то же самое, что и загрузчик для использования, и имеет множество различных элементов, которые можно использовать, чтобы сделать ваш сайт более удивительным. Он использует класс для добавления CSS к элементам.

Таблицы — это простой способ упорядочить большое количество данных. Таблица — это расположение данных в строках и столбцах или, возможно, в более сложной структуре. Таблицы широко используются в общении, исследованиях и анализе данных. Таблицы полезны для различных задач, таких как представление текстовой информации и числовых данных. Его можно использовать для сравнения двух или более элементов в макете табличной формы. Таблицы используются для создания баз данных. Таблица HTML и таблица семантического пользовательского интерфейса имеют одинаковую структуру.

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

Семантический класс сортируемой таблицы пользовательского интерфейса:

sortable: этот класс позволяет сортировать содержимое, щелкая заголовок таблицы.

Синтаксис:

<table class="ui sortable table">
    <tr>
        <td></td>
        ...
    </tr>
    ...
</table>

Пример 1. Это базовый пример, иллюстрирующий вариант с возможностью сортировки таблицы , созданный с помощью семантического пользовательского интерфейса.

Выход:

Пример 2. Это базовый пример, иллюстрирующий сортируемый вариант свернутой чередующейся таблицы , созданный с помощью семантического пользовательского интерфейса.

HTML

<!DOCTYPE html>
<html>
<head>
    <title>Semantic UI Table Sortable Variation</title>
    <link href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" 
          rel="stylesheet" />
    <script src=
"https://code.jquery.com/jquery-3.1.1.min.js"
            crossorigin="anonymous">
    </script>
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js">
    </script>
    <script src=
"https://semantic-ui.com/javascript/library/tablesort.js">
     </script>
</head>
<body>
    <center>
        <h1 class="ui green header">GeeksforGeeks</h1>
        <strong>Semantic UI Table Sortable Variation</strong>
    </center>
    <table class="ui sortable celled table">
      <thead>
          <tr>
              <th>Names</th>
              <th>Maths Marks</th>
              <th>Physics Marks</th>
              <th>Chemistry Marks</th>
              <th>Computer Marks</th>
          </tr>
      </thead>
      <tbody>
        <tr>
          <td>Ravi</td>
          <td>48</td>
          <td>84</td>
          <td>63</td>
          <td>77</td>
        </tr>
        <tr>
          <td>Srihita</td>
          <td>55</td>
          <td>97</td>
          <td>74</td>
          <td>49</td>
        </tr>
        <tr>
          <td>Naveen</td>
          <td>85</td>
          <td>85</td>
          <td>41</td>
          <td>67</td>
        </tr>
        <tr>
          <td>Tomar</td>
          <td>85</td>
          <td>31</td>
          <td>45</td>
          <td>44</td>
        </tr>
    </tbody>
  </table>
  <script>
      $(".sortable.table").tablesort();
  </script>
</body>    
</html>

Выход:

Ссылка: https://semantic-ui.com/collections/table.html#sortable

Picked CSS

Сортируемая таблица Semantic-UI

HTML

РЕКОМЕНДУЕМЫЕ СТАТЬИ