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, и изберете Download файлове по-долу. Уебсайт:Входът към хиперлинк е видим.
Извличаме изтегления пакет в директорията "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 файл:
styles.scss файл:
Typescript код (baseinfocompany-list.component.ts)
Забележка: HttpClientModule също трябва да бъде добавен през app.module.ts г., както следва:
Китайският код за таблици на китайски е следният:
Туристи, ако искате да видите скритото съдържание на този пост, моля Отговор
|
Публикувано в 29.10.2018 г. 14:54:16 ч.
|
|
|
|
Публикувано в 10.11.2018 г. 21:58:48 ч.
|
Участвайте във формата на архитект