Как с помощью DataTables создать таблицу, обновляемую в режиме реального времени

Если вы создаете приложение, которое обрабатывает большие массивы данных, то понадобится реализовать таблицы, обновляемые в режиме реального времени. Возьмем, например, систему управления содержимым.

В ней часто добавляется и удаляется большое число данных, и хотелось бы, чтобы данные изменения были доступны для посетителей немедленно.

В данной статье мы создадим таблицы, обновляемые онлайн. Для этого будем использовать пару инструментов для разработчиков, а:

  • jQuery: небольшая библиотека JavaScript, включающая в себя обширный функционал, который может упростить управление DOM, обработку событий, анимацию и реализацию В том числе и при помощи jquery datatables.
  • Pusher: Бесплатный, простой в использовании realtime pub / sub сервис. Он может реализовать обработку данных в режиме реального времени при помощи основных событий.
  • DataTables : jQuery -плагин для дополнения элементов управления в любую HTML–таблицу.
  • Bootstrap: интерфейс для разработки адаптивных проектов.

На приведенном ниже изображении продемонстрировано, что мы собираемся создать:

Как при помощи DataTables создать таблицу, обновляемую в режиме реального времени

Параметр таблиц данных при помощи 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 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));
Как при помощи DataTables создать таблицу, обновляемую в режиме реального времени

Выбор и удаление существующих записей из таблицы

Создадим способ 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 создать таблицу, обновляемую в режиме реального времени

Заключение

Сейчас вы сможете с легкостью создавать кросс-платформенные приложения, поддерживающие возможность обновления в режиме реального времени. Также доступны и иные возможности 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]

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *