Dynamic Table

Как с помощью 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-странице следующие ссылки:

А приведенные ниже ссылки должны размещаться в конце элемента

непосредственно перед его закрывающимся тегом:

Примеры использования 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-файлом :

Добавление новых записей в таблицу

Чтобы добавить в таблицу новые записи, сначала создаем на странице форму с допустимыми параметрами. Затем приступаем к созданию в JavaScript-файле метода с именем buildForm() . Используя jQuery , обеспечиваем, чтобы buildForm() возвращал значение каждого параметра формы, исходный код, которой приведен ниже.

 
Create New Employee
 
Name 
Position --Select Position-- Frontend Developer UI/UX Engineer iOS Engineer Android Developer  
 
Office --Select Office-- Lagos London New York Berlin  
 
Extn 
Start Date 
Salary 
Add 
 

Затем продолжаем создавать метод buildForm() :

Метод addRow() служит для добавления любых данных, возвращаемых buildForm() :

Методы 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 :

Также создаем метод removeRow() , который предназначен для удаления строк из таблицы. Удаляемая строка — это строка с классом selected :

Затем переходим к привязке 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 должен быть установлен как на стороне клиента, так и на стороне сервера.

Клиентская сторона содержит тег

, а на стороне сервера мы устанавливаем пакет через npm. Вместе с Pusher будет интегрирована несколько фреймворков и пакетов:

• Express : Быстрый, легкий, гибкий интерфейс для Node.js ;
• bodyParser : Модуль, предоставляющий промежуточное ПО, которое извлекает тело входящего потока запросов и предоставляет его req.body в более доступной для взаимодействия форме;
• cors : Пакет Node.js для включения совместного использования ресурсов разными источниками;
• Axios : HTTP-клиент для JavaScript , используемый для отправки асинхронных HTTP-запросов конечным точкам REST и для выполнения операций CRUD .

Установка Pusher на стороне клиента

Мы начинаем с включения библиотеки Pusher Client и Axios на HTML-странице :

В файле 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:

Источник

How to create dynamic table using jQuery.

Create a dynamic table using jQuery. In this tutorial, I am going to show you how to generate a table dynamically. There is two input field one for the number of columns and other is for the number of rows you want to enter and a button. And when you click on the button table will be generated below.

create a dynamic table using jQuery

Connect jquery.min.js library with your webpage

Complete application code to create dynamic table using jQuery

        
Number of Rows: Number of Coloumn: Create Table 
Table will gentare here.
 
  

Источник