Как с помощью DataTables создать таблицу, обновляемую в режиме реального времени
Если вы создаете приложение, которое обрабатывает большие массивы данных, то понадобится реализовать таблицы, обновляемые в режиме реального времени. Возьмем, к примеру, систему управления контентом.
В ней часто добавляется и удаляется большое количество данных, и хотелось бы, чтобы эти изменения были доступны для пользователей немедленно.
В этой статье мы создадим таблицы, обновляемые онлайн. Для этого будем использовать несколько инструментов для разработчиков, а именно:
- jQuery: небольшая библиотека JavaScript, включающая в себя обширный функционал, который позволяет упростить управление DOM, обработку событий, анимацию и реализацию В том числе и с помощью jquery datatables.
- Pusher: Бесплатный, простой в использовании realtime pub / sub сервис. Он позволяет реализовать обработку данных в режиме реального времени с помощью основных событий.
- DataTables: jQuery-плагин для дополнения элементов управления в любую HTML–таблицу.
- Bootstrap: интерфейс для разработки адаптивных проектов.
На приведенном ниже изображении продемонстрировано, что мы собираемся создать:
Настройка таблиц данных с помощью jquery datatables
DataTables запускается в приложении просто. Все, что нам нужно сделать, это включить JavaScript и CSS-файлы DataTables на HTML-странице.
Существует множество других плагинов для расширения набора функций DataTables, но в основном мы будем использовать эти два файла.
DataTables – это jQuery- плагин, для его работы необходима библиотека jQuery. Чтобы подключить DataTables на странице, мы используем на HTML-странице следующие ссылки:
<head>
<link rel="stylesheet" href="//cdn.datatables.net/1.10.15/css/jquery.dataTables.css">
</head>А приведенные ниже ссылки должны размещаться в конце элемента
<body>непосредственно перед его закрывающимся тегом:
<body>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script charset="utf8" src="https://www.internet-technologies.ru/wp-content/uploads//cdn.datatables.net/1.10.15/js/jquery.dataTables.js"></script>
<script src="https://cdn.datatables.net/plug-ins/1.10.15/api/row().show().js"></script>
</body>Примеры использования jquery datatables
Создание таблицы
Чтобы создать шаблон таблицы, вставляем элемент таблицы на страницу и с помощью jQuery добавляем к нему метод DataTable. Это позволяет инициализировать все встроенные функции DataTables. Метод DataTable принимает объект в качестве аргумента. Объект содержит свойство data, которое принимает [dataSet](https://github.com/christiannwamba/pusher-realtime-jquery-datatable/blob/master/data.js), массив данных, которые собираемся отображать в таблице.
Мы также включаем свойство columns, и устанавливаем его значение в массив объектов с каждым значением объекта, служащим заголовком столбца таблицы.
const dataTable = $('#realtime').DataTable({
data: dataSet,
columns: [
{ title: 'Name' },
{ title: 'Position' },
{ title: 'Office' },
{ title: 'Extn.' },
{ title: 'Start date' },
{ title: 'Salary' }
]
});Набор данных хранится в другом JavaScript-файле и должен быть импортирован перед указанным выше JS-файлом:
<script src="data.js"></script>
<script src="script.js"></script>Добавление новых записей в таблицу
Чтобы добавить в таблицу новые записи, сначала создаем на странице форму с допустимыми параметрами. Затем приступаем к созданию в JavaScript-файле метода с именем buildForm(). Используя jQuery, обеспечиваем, чтобы buildForm() возвращал значение каждого параметра формы, исходный код, которой приведен ниже.
<div class="col-md-4 col-md-offset-1">
<h3 class="text-center">Create New Employee</h3>
<div class="form-group">
<label for="name">Name</label>
<input type="text" name="name" id="name" placeholder="Name" class="form-control">
</div>
<div class="form-group">
<label for="position">Position</label>
<select name="position" id="position" class="form-control">
<option value="">--Select Position--</option>
<option value="Frontend Developer">Frontend Developer</option>
<option value="UI/UX Engineer">UI/UX Engineer</option>
<option value="iOS Engineer">iOS Engineer</option>
<option value="Android Developer">Android Developer</option>
</select>
</div>
<div class="form-group">
<label for="office">Office</label>
<select name="office" id="office" class="form-control">
<option value="">--Select Office--</option>
<option value="Lagos">Lagos</option>
<option value="London">London</option>
<option value="New York">New York</option>
<option value="Berlin">Berlin</option>
</select>
</div>
<div class="form-group">
<label for="extn">Extn</label>
<input type="number" name="extn" id="extn" placeholder="Extn" class="form-control">
</div>
<div class="form-group">
<label for="startDate">Start Date</label>
<input type="date" name="startDate" id="startDate" placeholder="Start Date" class="form-control">
</div>
<div class="form-group">
<label for="salary">Salary</label>
<input type="number" name="salary" id="salary" placeholder="Salary" class="form-control">
</div>
<div class="form-group">
<button class="btn btn-info" id="add">Add</button>
</div>
</div>Затем продолжаем создавать метод buildForm():
buildForm() {
return [
$('#name').val(),
$('#position').val(),
$('#office').val(),
$('#extn').val(),
$('#startDate')
.val()
.replace(new RegExp('-', 'g'), '/'),
`$${$('#salary').val()}`
];
},Метод addRow() служит для добавления любых данных, возвращаемых buildForm():
addRow(dataTable) {
const formData = this.buildForm();
const addedRow = dataTable.row.add(formData).draw();
addedRow.show().draw(false);
const addedRowNode = addedRow.node();
console.log(addedRowNode);
$(addedRowNode).addClass('highlight');
}Методы row.add() и .draw() являются встроенными API-интерфейсами DataTables. Также в addRow() реализованы другие методы DataTables: .show(), .draw(false) и .node():
- add() добавляет новую строку в таблицу;
- .draw() заново воссоздает и обновляет таблицу в текущем контексте;
- .show() отображает поле в таблице. Это полезно, когда нужно добавить дополнительные поля, но отображать их только при определенных условиях;
- .draw(false) добавляет новую строку без сброса или искажения текущей страницы;
- .node() служит по событий, который возвращает элемент DOM для запрошенного поля. Это позволяет DOM манипулировать этим полем.
Затем метод addRow() привязываем к кнопке с помощью jQuery-метода .click(). Когда кнопка нажата, addRow() автоматически выполняет свои функции.
$('#add').on('click', this.addRow.bind(this, dataTable));
Выбор и удаление существующих записей из таблицы
Создадим метод selectRow(), который предназначен для выбора строки в таблице. Метод добавляет к выбранной строке класс selected и удаляет все строки, в которые ранее был добавлен класс selected:
selectRow(dataTable) {
if ($(this).hasClass('selected')) {
$(this).removeClass('selected');
} else {
dataTable.$('tr.selected').removeClass('selected');
$(this).addClass('selected');
}
}Также создаем метод removeRow(), который предназначен для удаления строк из таблицы. Удаляемая строка - это строка с классом selected:
removeRow(dataTable) {
dataTable.row('.selected').remove().draw( false );
}Затем переходим к привязке selectRow() и removeRow() к соответствующим триггерам событий. Для этого используем jQuery-метод .click():
const self = this;
$('#realtime tbody').on('click', 'tr', function(){
self.selectRow.bind(this, dataTable)();
});
$('#remove').on('click', this.removeRow.bind(this, dataTable));Обновление в режиме реального времени с помощью Pusher
Чтобы включить в таблице обновление в режиме реального времени, интегрируем Pusher. Pusher. Это простой API для быстрой реализации двухстороннего обновления в режиме реального времени в веб и мобильных приложениях. Для этого Pusher должен быть установлен как на стороне клиента, так и на стороне сервера.
Клиентская сторона содержит тег
<script>, а на стороне сервера мы устанавливаем пакет через npm. Вместе с Pusher будет интегрирована несколько фреймворков и пакетов:
- Express: Быстрый, легкий, гибкий интерфейс для Node.js;
- bodyParser: Модуль, предоставляющий промежуточное ПО, которое извлекает тело входящего потока запросов и предоставляет его req.body в более доступной для взаимодействия форме;
- cors: Пакет Node.js для включения совместного использования ресурсов разными источниками;
- Axios: HTTP-клиент для JavaScript, используемый для отправки асинхронных HTTP-запросов конечным точкам REST и для выполнения операций CRUD.
Установка Pusher на стороне клиента
Мы начинаем с включения библиотеки Pusher Client и Axios на HTML-странице:
<body> <script src="https://js.pusher.com/4.1/pusher.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.16.2/axios.js"></script> </body>В файле script.js мы создаем метод sendToServer(), в котором выполняем POST-запрос с помощью Axios. В POST-запросе передаем два параметра.
Первый - это URI конечной точки службы, а второй - данные таблицы, которые устанавливаем как значение для вновь созданной константы formData:
sendToServer() { const formData = this.buildForm(); axios.post('http://localhost:2000/record', formData) .then(response => console.log(response)); }Затем мы устанавливаем связь с Pusher, создавая новый экземпляр Pusher. Вставляем бесплатный ключ API, который можно получить от Pusher при регистрации. Чтобы обеспечить шифрование трафика подключения, устанавливаем в приложении для параметра encrypted логическое значение true:
var pusher = new Pusher('APP-KEY', { cluster: 'CLUSTER', encrypted: true });Ключ является частью учетных данных, которые генерируются при создании нового приложения в панели инструментов Pusher. Вы можете создать учетную запись, зарегистрировавшись в сервисе.
Установка Pusher на сервере
Запустите приведенную ниже команду для установки зависимостей сервера:
npm install express body-parser corsВ результате будет создан файл server.js. Затем инициализируем Express, после чего настраиваем его для поддержки совместного использования ресурсов, закодированного тела и JSON.
После этого создаем новый экземпляр Pusher, который содержит объект с идентификатором приложения, ключом, секретом, кластером и настройками шифрования.
Затем создаем маршрут POST, и в нем используем Pusher для запуска события с именем new-record через канал record:
const express = require('express'); const bodyParser = require('body-parser') const Pusher = require('pusher') const cors = require('cors') const app = express(); app.use(cors()) app.use(bodyParser.urlencoded({ extended: false })) app.use(bodyParser.json()) const pusher = new Pusher({ appId: 'APP-ID', key: 'KEY', secret: 'SECRET', cluster: 'CLUSTER', encrypted: true }); app.post('/record', (req, res) => { console.log(req.body); pusher.trigger('records', 'new-record', req.body); res.send('Pushed'); }) app.listen(2000, () => console.log('Listening at 2000'));Чтобы выполнять обновление в таблице в режиме реального времени, в файле script.js (на стороне клиента) используем метод Pusher subscribe() для подписки на записи records. Затем определяем функцию обратного вызова, которая привязывает событие new-record, а вместе с ним и данные:
var pusher = new Pusher('APP-KEY', {
cluster: 'CLUSTER',
encrypted: true
});
var channel = pusher.subscribe('records');
channel.bind('new-record', (data) => {
this.addRow(dataTable, data);
});
Заключение
Теперь вы сможете с легкостью создавать кросс-платформенные приложения, поддерживающие функцию обновления в режиме реального времени. Также доступны и другие функции DataTables и Pusher, но их использование зависит от потребностей вашего приложения.
Вы можете ознакомиться с документацией DataTables и с документацией Pusher, изучить проект на GitHub.
Дополнение: Настройка Pusher
Зарегистрируйте бесплатную учетную запись Pusher:
Создайте новое приложение, выбрав в боковой панели пункт «Apps» и нажав кнопку «Create New», расположенную в нижней части боковой панели:
Настройте приложение, предоставив основную информацию, запрошенную в представленной форме. Также можно выбрать среду, с которой вы собираетесь интегрировать Pusher:
Вы можете получить свои ключи на вкладке App Keys:
