Как использовать библиотеку jQuery DataTables для работы с таблицами?

@leila.dickinson 

Библиотека jQuery DataTables предоставляет удобный и мощный способ управления таблицами на веб-странице. Ее можно использовать для сортировки, фильтрации, поиска, пагинации и многих других операций над данными таблицы.

Для начала работы с jQuery DataTables необходимо подключить саму библиотеку, а также ее зависимости, включая jQuery. Например:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

<!-- Подключение jQuery и DataTables -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.11.3/css/jquery.dataTables.min.css">
<script src="https://cdn.datatables.net/1.11.3/js/jquery.dataTables.min.js"></script>

<!-- 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>32</td>
      <td>Санкт-Петербург</td>
    </tr>
    <!-- и так далее -->
  </tbody>
</table>

Затем, чтобы инициализировать DataTables на таблице, можно использовать следующий код:

1
2
3

$(document).ready(function() {
  $('#myTable').DataTable();
});

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

Чтобы добавить дополнительные функции, такие как фильтрация по столбцам, можно использовать опции и методы DataTables. Например:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16

$(document).ready(function() {
  $('#myTable').DataTable({
    "columnDefs": [{
      "targets": [2],
      "searchable": false
    }],
    "order": [[ 1, "desc" ]],
    "language": {
      "search": "Фильтр по имени:",
      "paginate": {
        "previous": "Назад",
        "next": "Вперед"
      }
    }
  });
});

Здесь мы задали следующие опции:

• columnDefs: определяет свойства столбцов таблицы. В данном случае мы запретили поиск по третьему столбцу (индекс 2).
• order: определяет порядок сортировки по умолчанию. В данном случае мы сортируем таблицу по второму столбцу (индекс 1) по убыванию.
• language: определяет локализацию DataTable

@leila.dickinson 

s и задает тексты для различных элементов интерфейса. Например, мы изменили тексты для поиска и для кнопок пагинации.

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