Как с помощью 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" type="text/css" 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 type="text/javascript" charset="utf8" src="//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:

[IMG=https://blog.pusher.com/wp-content/uploads/2017/10/build-realtime-table-datatables-signup.png]

Создайте новое приложение, выбрав в боковой панели пункт «Apps» и нажав кнопку «Create New», расположенную в нижней части боковой панели:

[IMG=https://blog.pusher.com/wp-content/uploads/2017/10/build-realtime-table-datatables-dashboard.png]

Настройте приложение, предоставив основную информацию, запрошенную в представленной форме. Также можно выбрать среду, с которой вы собираетесь интегрировать Pusher:

[IMG=https://blog.pusher.com/wp-content/uploads/2017/10/build-realtime-table-datatables-create-app.png]

Вы можете получить свои ключи на вкладке App Keys:

[IMG=https://blog.pusher.com/wp-content/uploads/2017/10/build-realtime-table-datatables-api-keys.png]

Перевод статьи «How to build a realtime table with DataTables» дружной командой проекта Сайтостроение от А до Я.