Описание тега datatables
DataTables - это надстройка для библиотеки javascript jquery. Это очень гибкий инструмент, основанный на принципах прогрессивного улучшения, который добавит расширенные элементы управления взаимодействием в любую html-таблицу.
Не путайте этот тег с datatable, который предназначен для конструкций таблиц на других языках, таких как тип DataTable .NET! Совместное использование обоих тегов следует выполнять только при отображении содержимого.NET DataTable в виде jQuery DataTables на веб-странице.
##Ключевая особенность:##
- Пагинация переменной длины
- Фильтрация на лету
- Сортировка по нескольким столбцам с определением типа данных
- Умная обработка форматированных данных для отображения, фильтрации и сортировки
- Умная обработка ширины столбцов
- Отображение данных практически из любого источника данных
- DOM, массив JavaScript, файл Ajax и обработка на стороне сервера (PHP, C#, Perl, Ruby, AIR, Gears, Python и т. Д.)
- Параметры прокрутки для области просмотра таблицы
- Поддерживает интернационализацию
- Поддержка jQuery UI ThemeRoller
- Надежность - поддерживается набором из 2600+ модульных тестов
- Широкий выбор плагинов, вкл. TableTools, FixedColumns, KeyTable и другие
- Это бесплатно!
##Ресурсы:##
## Кодировка:##
Добавить последнюю версию всех библиотек
<link href="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.21/css/jquery.dataTables.min.css" rel="stylesheet" >
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.21/js/jquery.dataTables.min.js"></script>
### Таблица HTML по умолчанию ###
Чтобы DataTables могла улучшать таблицу HTML, таблица должна быть действительным, хорошо отформатированным HTML, с заголовком (thead) и тело (tbody). Необязательный нижний колонтитул (tfoot) также можно использовать.
<table id="example" class="display">
<thead>
<tr>
<th>Company name</th>
<th>Address</th>
<th>Town</th>
</tr>
</thead>
<tbody>
<tr>
<td>Emkay Entertainments</td>
<td>Nobel House, Regent Centre</td>
<td>Lothian</td>
</tr>
<tr>
<td>The Empire</td>
<td>Milton Keynes Leisure Plaza</td>
<td>Buckinghamshire</td>
</tr>
</tbody>
</table>
### Инициализация плагинов:###
После правильного включения необходимых JavaScript/JQuery librariesплагин можно инициализировать с помощью нескольких строк кода. Текст после# характер и id атрибут таблицы должен быть идентичным.
$(document).ready(function() {
$('#example').dataTable();
});
###Fiddle:###