|
|
Опубликовано 29.10.2018 14:54:16
|
|
|
|
JQuery DataTables — очень полезный плагин для списка данных, нет необходимости писать собственные страницы, сортировку, фильтрацию и другие функции, просто возвращайте указанный формат json, плагин поможет вам отобразить данные. Как применить этот полезный плагин для отображения таблиц к проектам Angular?
В этой статье интегрируются Angular+bootstrap+DataTables
Официальный сайт DataTables:Вход по гиперссылке виден.
Угловые таблицы данных:Вход по гиперссылке виден.
(Angular Structural Framework для динамических веб-приложений + плагин DataTables jQuery для сложных HTML-таблиц)
GitHub:Вход по гиперссылке виден.
Сначала давайте рассмотрим эффект после интеграции, как показано ниже:
Установка стартера
Чтобы использовать таблицу угловых данных, нужно установить узел 8.9 или выше, а также NPM 6 или новее.
Этот документ касается только проектов, использующих angular-cli. На самом деле, фронтенд-экосистема растёт с такой скоростью, за которой я уже не могу следить. Так что для проекта angular-cli есть только учебник. Если вам удаётся заставить его работать, например, проект SystemJS, пожалуйста, отправьте pull request для улучшения этой документации. Спасибо!
Angular-CLI версии 7.YZ
Рекомендую использовать angular-cli для создания и управления угловыми проектами
Хочу предупредить, что демо-версия выходит на 7-й версии. Версия YZ, в то время как новые версии Angular-CLI могут нуждаться в другой конфигурации.
NPM
Прежде чем получить последнюю версию с NPM, нужно установить её зависимости:
Мой текущий проект — Angular 6.x, интерфейс использует шаблон из Bootstrap, и jQuery уже был использован, так что моему собственному проекту он нуженОсобое отношение，
NPM устанавливает только:
Скачайте пакет плагинов с официального сайта datatables, проверьте Bootstrap 4 и DataTables, а также выберите раздел «Скачать файлы» ниже. Веб-сайт:Вход по гиперссылке виден.
Мы извлекаем загруженный пакет в каталог "src\assets\plugins\datatables.net",Каталог Нет, пожалуйста, создайте его сами！！！
Отредактируйте angular.json файл, чтобы добавить зависимости в свойства скрипта и стиля:
В основном добавляю datatables.css и datatables.js файлы в проект.
Конфигурация NgModule, импортировать DataTablesModule на соответствующий уровень приложения.
Поскольку мой маршрут лениво загружает путь, яНе такИмпортировано в файл «app.module.ts», пожалуйстаИмпортируйте в соответствии с вашей реальной ситуацией。
Если импорт неверен, ошибка следующая:
core.js:1673 ERROR Error: Uncaught (in promise): Error: Template parse errors:
Нельзя привязать к 'dtOptions', так как это не известное свойство 'table'. ("<div class="ряд">
<div class="COL-12">
<таблица данных [ОШИБКА ->]
Пагинирование на стороне сервера
HTML-страница (baseinfocompany-list.component.html):
CSS-код (должен быть добавлен, с оговорками):
baseinfocompany-list.component.scss file:
styles.scss:
Typescript код (baseinfocompany-list.component.ts)
Примечание: HttpClientModule также должен быть добавлен в app.module.ts, следующим образом:
Китайский код для таблиц данных выглядит следующим образом:
Туристы, если вы хотите увидеть скрытое содержание этого поста, пожалуйста Ответ
|
Предыдущий:Работники постпродакшна кино и телевидения, а также те, кто любит учиться, должны использовать технологии кино и телевиденияСледующий:NPM удаляет модуль удаления
|
Опубликовано 10.11.2018 21:58:48
|
Участвуйте в форме архитектора