|
|
Опубліковано 29.10.2018 14:54:16
|
|
|
|
JQuery DataTables — дуже корисний плагін для списку даних, не потрібно писати власні сторінки, сортування, фільтрацію та інші функції, просто поверніть вказаний формат json, плагін допоможе вам відобразити дані. Як застосувати цей корисний плагін для відображення таблиць до проєктів Angular?
Ця стаття інтегрує Angular+bootstrap+DataTables
Офіційний сайт DataTables:Вхід за гіперпосиланням видно.
Кутові таблиці даних:Вхід за гіперпосиланням видно.
(Angular Structural Framework для динамічних веб-додатків + плагін DataTables jQuery для складних HTML-таблиць)
GitHub:Вхід за гіперпосиланням видно.
Спершу розглянемо ефект після інтегрування, як показано нижче:
Встановлення стартера
Щоб користуватися таблицею кутових даних, потрібно встановити Node 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="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
|
Беріть участь у формі архітектора