datatables net tn 7

Я пытаюсь следовать примеру добавления данных в datatables.net datatable с использованием ответа JSON на основе этого примера https://www.datatables.net/examples/ajax/objects.html.

Я использую вызов AJAX для получения ответа JSON из базы данных.

Я получаю данные, а затем используя NewtonSoft JSON.Net для преобразования данных в массив JSON в соответствии с приведенным ниже кодом

Это успешно вызывается из вызова AJAX в отдельном файле javascript в соответствии с следующим фрагментом кода

Который затем передает возвращаемые значения функции, которая должна форматировать ввод данных в данные, соответствующие соответственно следующему набору кода

Проблема, которую я получаю, похожа на этот вопрос, здесь jquery datatables Ajax-Error/http://datatables.net/tn/7, однако я пробовал это решение для пользователей и имел ту же проблему.

Я выполнил все рекомендуемые шаги, как описано здесь https://www.datatables.net/manual/tech-notes/7, но не вижу ничего плохого в ответах, которые возвращаются, которые относятся к этому.

Я был бы признателен, если бы кто-нибудь мог мне помочь в этом, так как я не вижу пути вокруг проблемы в данный момент

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

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

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

• 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 , и устанавливаем его значение в массив объектов с каждым значением объекта, служащим заголовком столбца таблицы.

Набор данных хранится в другом JavaScript-файле и должен быть импортирован перед указанным выше JS-файлом :

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

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

Затем продолжаем создавать метод 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() автоматически выполняет свои функции.

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

Создадим метод selectRow() , который предназначен для выбора строки в таблице. Метод добавляет к выбранной строке класс selected и удаляет все строки, в которые ранее был добавлен класс selected :

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

Затем переходим к привязке selectRow() и removeRow() к соответствующим триггерам событий. Для этого используем jQuery-метод .click() :

Обновление в режиме реального времени с помощью Pusher

Чтобы включить в таблице обновление в режиме реального времени, интегрируем Pusher . Pusher . Это простой API для быстрой реализации двухстороннего обновления в режиме реального времени в веб и мобильных приложениях. Для этого Pusher должен быть установлен как на стороне клиента, так и на стороне сервера.

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

В файле script.js мы создаем метод sendToServer() , в котором выполняем POST-запрос с помощью Axios . В POST-запросе передаем два параметра.

Первый — это URI конечной точки службы, а второй — данные таблицы, которые устанавливаем как значение для вновь созданной константы formData :

Затем мы устанавливаем связь с Pusher , создавая новый экземпляр Pusher . Вставляем бесплатный ключ API , который можно получить от Pusher при регистрации. Чтобы обеспечить шифрование трафика подключения, устанавливаем в приложении для параметра encrypted логическое значение true :

Ключ является частью учетных данных, которые генерируются при создании нового приложения в панели инструментов Pusher . Вы можете создать учетную запись, зарегистрировавшись в сервисе .

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

Запустите приведенную ниже команду для установки зависимостей сервера:

В результате будет создан файл server.js . Затем инициализируем Express , после чего настраиваем его для поддержки совместного использования ресурсов, закодированного тела и JSON .

После этого создаем новый экземпляр Pusher , который содержит объект с идентификатором приложения, ключом, секретом, кластером и настройками шифрования.

Затем создаем маршрут POST , и в нем используем Pusher для запуска события с именем new-record через канал record :

Чтобы выполнять обновление в таблице в режиме реального времени, в файле script.js ( на стороне клиента ) используем метод Pusher subscribe() для подписки на записи records . Затем определяем функцию обратного вызова, которая привязывает событие new-record , а вместе с ним и данные:

Заключение

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

Вы можете ознакомиться с документацией DataTables и с документацией Pusher , изучить проект на GitHub .

Дополнение: Настройка Pusher

Зарегистрируйте бесплатную учетную запись Pusher :

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

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

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

Данная публикация представляет собой перевод статьи « How to build a realtime table with DataTables » , подготовленной дружной командой проекта Интернет-технологии.ру

Пожалуйста, посмотрите мою проблему ниже:

Я использую в своей MVC-Web-Application jquery datatables. Когда я показываю только 8 столбцов, все работает нормально. Но с еще одним столбцом я получаю сообщение ajax-error, см. Заголовок.

Контроллер wokr отлично, потому что 8 столбцов работают нормально. Здесь мой код представления:

Вы можете, что последние столбцы не активны, а затем:

Когда я делит//из последнего столбца, тогда:

Как я могу решить эту проблему? Пожалуйста, помогите мне. Я ищу решение, с понедельника, весь день!