Как использовать Data Table JS для создания интерактивных таблиц

<!-- CSS -->
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.13.7/css/jquery.dataTables.min.css">

<!-- JavaScript -->
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="https://cdn.datatables.net/1.13.7/js/jquery.dataTables.min.js"></script>

npm install datatables.net datatables.net-dt

<table id="myTable" class="display">
<thead>
<tr>
<th>Имя</th>
<th>Должность</th>
<th>Офис</th>
<th>Возраст</th>
<th>Дата начала</th>
<th>Зарплата</th>
</tr>
</thead>
<tbody>
<tr>
<td>Тигран Петросян</td>
<td>Системный архитектор</td>
<td>Москва</td>
<td>33</td>
<td>2024/04/25</td>
<td>320,000₽</td>
</tr>
<!-- Другие строки данных -->
</tbody>
</table>

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

$(document).ready(function() {
$('#myTable').DataTable({
pageLength: 25, // Количество строк на странице
lengthMenu: [10, 25, 50, 100], // Доступные варианты
responsive: true, // Адаптивность к экрану
language: {
url: '//cdn.datatables.net/plug-ins/1.13.7/i18n/ru.json'
},
dom: 'Bfrtip', // Расположение элементов интерфейса
buttons: [ // Добавление кнопок экспорта
'copy', 'excel', 'pdf', 'print'
]
});
});

$('#myTable').DataTable({
ajax: {
url: 'api/data',
dataSrc: ''
},
columns: [
{ data: 'name' },
{ data: 'position' },
{ data: 'office' },
{ data: 'age' },
{ data: 'start_date' },
{ data: 'salary' }
]
});

$('#myTable').DataTable({
searching: true, // Включение функции поиска (включена по умолчанию)
search: {
smart: true, // Интеллектуальный поиск (по словам, а не по всей фразе)
regex: false, // Поддержка регулярных выражений
caseInsensitive: true // Регистронезависимый поиск
}
});

$('#myTable').DataTable({
initComplete: function () {
this.api().columns().every(function () {
var column = this;
var select = $('<select><option value=""></option></select>')
.appendTo($(column.footer()).empty())
.on('change', function () {
var val = $.fn.dataTable.util.escapeRegex(
$(this).val()
);
column
.search(val ? '^' + val + '$' : '', true, false)
.draw();
});

column.data().unique().sort().each(function (d, j) {
select.append('<option value="' + d + '">' + d + '</option>')
});
});
}
});

$('#myTable').DataTable({
order: [[4, 'desc'], [0, 'asc']], // Сортировка по 5-му столбцу по убыванию, затем по 1-му по возрастанию
columnDefs: [
{ orderable: false, targets: [5] }, // Отключение сортировки для 6-го столбца
{ 
type: 'date-euro', // Европейский формат даты (дд.мм.гггг)
targets: 4 
},
{
type: 'formatted-num', // Форматированные числа (с разделителями тысяч)
targets: 5
}
]
});

$.fn.dataTable.ext.type.order['salary-pre'] = function (data) {
// Удаление символов валюты и преобразование в число для корректной сортировки
return parseFloat(data.replace(/[^\d.-]/g, ''));
};

$('#myTable').DataTable({
columnDefs: [
{
type: 'salary',
targets: 5 // Применение к столбцу с зарплатой
}
]
});

$.fn.dataTable.ext.search.push(
function(settings, data, dataIndex) {
var min = parseInt($('#min-age').val(), 10);
var max = parseInt($('#max-age').val(), 10);
var age = parseFloat(data[3]) || 0; // Возраст находится в 4-м столбце

if (
(isNaN(min) && isNaN(max)) ||
(isNaN(min) && age <= max) ||
(min <= age && isNaN(max)) ||
(min <= age && age <= max)
) {
return true;
}
return false;
}
);

// Обработчики событий для полей ввода диапазона
$('#min-age, #max-age').keyup(function() {
table.draw(); // Перерисовка таблицы при изменении значений
});

// Подключение дополнительных файлов
// <link rel="stylesheet" href="https://cdn.datatables.net/buttons/2.4.2/css/buttons.dataTables.min.css">
// <script src="https://cdn.datatables.net/buttons/2.4.2/js/dataTables.buttons.min.js"></script>
// <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script>
// <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.2.7/pdfmake.min.js"></script>
// <script src="https://cdn.datatables.net/buttons/2.4.2/js/buttons.html5.min.js"></script>
// <script src="https://cdn.datatables.net/buttons/2.4.2/js/buttons.print.min.js"></script>

$('#myTable').DataTable({
dom: 'Bfrtip',
buttons: [
{
extend: 'copy',
text: 'Копировать',
exportOptions: {
columns: [0, 1, 2, 3, 4, 5] // Выбор столбцов для экспорта
}
},
{
extend: 'excel',
text: 'Excel',
title: 'Данные сотрудников', // Название файла
messageTop: 'Отчет сформирован ' + new Date().toLocaleDateString(), // Заголовок
exportOptions: {
columns: ':visible' // Экспорт только видимых столбцов
}
},
{
extend: 'pdf',
text: 'PDF',
orientation: 'landscape', // Ландшафтная ориентация для широких таблиц
pageSize: 'A4',
title: 'Данные сотрудников',
customize: function(doc) {
// Настройка стилей PDF-документа
doc.styles.tableHeader.fontSize = 12;
doc.styles.tableHeader.bold = true;
doc.styles.title.fontSize = 16;
doc.styles.title.bold = true;
}
},
'print' // Кнопка печати
]
});

// Подключение дополнительных файлов
// <link rel="stylesheet" href="https://cdn.datatables.net/fixedheader/3.4.0/css/fixedHeader.dataTables.min.css">
// <link rel="stylesheet" href="https://cdn.datatables.net/fixedcolumns/4.3.0/css/fixedColumns.dataTables.min.css">
// <script src="https://cdn.datatables.net/fixedheader/3.4.0/js/dataTables.fixedHeader.min.js"></script>
// <script src="https://cdn.datatables.net/fixedcolumns/4.3.0/js/dataTables.fixedColumns.min.js"></script>

$('#myTable').DataTable({
scrollY: '400px', // Высота таблицы
scrollX: true, // Горизонтальная прокрутка
scrollCollapse: true,
fixedHeader: {
header: true, // Фиксация заголовка
footer: true // Фиксация футера
},
fixedColumns: {
left: 2 // Фиксация первых двух столбцов слева
}
});

// Требуется лицензия для коммерческого использования
// Подключение дополнительных файлов
// <link rel="stylesheet" href="https://cdn.datatables.net/select/1.7.0/css/select.dataTables.min.css">
// <link rel="stylesheet" href="https://cdn.datatables.net/editor/2.2.0/css/editor.dataTables.min.css">
// <script src="https://cdn.datatables.net/select/1.7.0/js/dataTables.select.min.js"></script>
// <script src="https://cdn.datatables.net/editor/2.2.0/js/dataTables.editor.min.js"></script>

// Инициализация редактора
var editor = new $.fn.dataTable.Editor({
ajax: 'api/employees',
table: '#myTable',
fields: [
{ label: 'Имя', name: 'name' },
{ label: 'Должность', name: 'position' },
{ label: 'Офис', name: 'office' },
{ label: 'Возраст', name: 'age' },
{ 
label: 'Дата начала', 
name: 'start_date',
type: 'datetime',
format: 'DD.MM.YYYY'
},
{ label: 'Зарплата', name: 'salary' }
]
});

// Инициализация таблицы с поддержкой редактирования
$('#myTable').DataTable({
dom: 'Bfrtip',
ajax: 'api/employees',
columns: [
{ data: 'name' },
{ data: 'position' },
{ data: 'office' },
{ data: 'age' },
{ data: 'start_date' },
{ data: 'salary' }
],
select: true,
buttons: [
{ extend: 'create', editor: editor, text: 'Создать' },
{ extend: 'edit', editor: editor, text: 'Редактировать' },
{ extend: 'remove', editor: editor, text: 'Удалить' }
]
});

// Подключение дополнительных файлов
// <link rel="stylesheet" href="https://cdn.datatables.net/rowgroup/1.4.1/css/rowGroup.dataTables.min.css">
// <script src="https://cdn.datatables.net/rowgroup/1.4.1/js/dataTables.rowGroup.min.js"></script>

$('#myTable').DataTable({
order: [[2, 'asc']], // Сортировка по офису (3-й столбец)
rowGroup: {
dataSrc: 2, // Группировка по офису
startRender: function(rows, group) {
// Настройка отображения заголовка группы
return group + ' (' + rows.count() + ' сотрудников)';
},
endRender: function(rows, group) {
// Суммарная статистика по группе
var avgAge = rows.data().pluck(3).reduce(function(a, b) {
return a + b*1;
}, 0) / rows.count();

return 'Средний возраст: ' + avgAge.toFixed(1) + ' лет';
}
}
});

$('#myTable').DataTable({
columns: [
{ data: 'name' },
{ data: 'position' },
{ data: 'office' },
{ 
data: 'age',
render: function(data, type, row) {
if (type === 'display') {
// Цветовое выделение в зависимости от возраста
var color = 'green';
if (data > 40) color = 'orange';
if (data > 50) color = 'red';

return '<span style="color:' + color + '">' + data + '</span>';
}
return data;
}
},
{ data: 'start_date' },
{ 
data: 'salary',
render: function(data, type, row) {
if (type === 'display') {
// Форматирование числа с разделителями тысяч
return new Intl.NumberFormat('ru-RU', { 
style: 'currency', 
currency: 'RUB',
maximumFractionDigits: 0
}).format(data);
}
return data;
}
}
]
});

$('#myTable').DataTable({
processing: true, // Показ индикатора загрузки
serverSide: true, // Включение серверной обработки
ajax: {
url: 'api/data',
type: 'POST', // Метод запроса
data: function(d) {
// Дополнительные параметры запроса
d.customParam = $('#customFilter').val();
return d;
}
},
columns: [
{ data: 'name' },
{ data: 'position' },
{ data: 'office' },
{ data: 'age' },
{ data: 'start_date' },
{ data: 'salary' }
]
});

{
"draw": 1,
"recordsTotal": 57000, // Общее количество записей
"recordsFiltered": 285, // Количество записей после фильтрации
"data": [ // Массив данных для текущей страницы
{
"name": "Тигран Петросян",
"position": "Системный архитектор",
"office": "Москва",
"age": 33,
"start_date": "2024/04/25",
"salary": 320000
},
// Другие записи
]
}

$('#myTable').DataTable({
deferRender: true, // Отрисовка только видимых строк
scroller: true, // Добавление виртуального скроллинга
scrollY: 400, // Высота области прокрутки
scrollCollapse: true
});

$('#myTable').DataTable({
dom: '<"top"if>rt<"bottom"lp><"clear">', // Минимизированный DOM
paging: true,
ordering: true,
info: true
});

var table = $('#myTable').DataTable({
// Базовая конфигурация
});

// Загрузка плагина только при клике на кнопку экспорта
$('#exportButton').on('click', function() {
// Динамическая загрузка скриптов
$.getScript('https://cdn.datatables.net/buttons/2.4.2/js/dataTables.buttons.min.js', function() {
$.getScript('https://cdn.datatables.net/buttons/2.4.2/js/buttons.html5.min.js', function() {
// Инициализация кнопки экспорта
new $.fn.dataTable.Buttons(table, {
buttons: [
{
extend: 'excel',
text: 'Экспорт в Excel',
exportOptions: {
columns: ':visible'
}
}
]
});

table.buttons().container()
.appendTo('#myTable_wrapper .col-md-6:eq(0)');

// Активация кнопки экспорта
$('#exportButton').off('click').on('click', function() {
table.button('.buttons-excel').trigger();
});
});
});
});

$('#myTable').DataTable({
columnDefs: [
// Отключение поиска в колонках с изображениями или иконками
{ searchable: false, targets: [5, 6] },

// Отключение сортировки для колонок с кнопками действий
{ orderable: false, targets: [6] },

// Установка приоритетов видимости колонок при адаптивной верстке
{ responsivePriority: 1, targets: 0 }, // Самый высокий приоритет
{ responsivePriority: 2, targets: 4 },
{ responsivePriority: 10000, targets: 5 } // Самый низкий приоритет
],

// Отключение ненужных функций
ordering: true,
paging: true,
searching: true,
info: false // Отключение информации о количестве записей
});

// Включение режима дебаггинга
$.fn.dataTable.ext.debugMode = true;

// Измерение времени отрисовки
var startTime;
$('#myTable').on('preXhr.dt', function() {
startTime = new Date().getTime();
}).on('xhr.dt', function() {
var endTime = new Date().getTime();
console.log('Время запроса: ' + (endTime – startTime) + 'ms');
}).DataTable();

// Мониторинг процесса рендеринга
$('#myTable').on('draw.dt', function() {
console.log('Таблица перерисована');
});