JQuery DataTables to bardzo przydatna wtyczka do listy danych, nie musisz pisać własnych funkcji sortowania paginacji, filtrowania i innych funkcji, wystarczy zwrócić określony format json, wtyczka może pomóc wyświetlić dane. Jak zastosować tę przydatną wtyczkę do wyświetlania tabel w projektach Angular?
Ten artykuł integruje Angular+bootstrap+DataTables
Oficjalna strona DataTables:Logowanie do linku jest widoczne.
Tablice danych Angular:Logowanie do linku jest widoczne.
(Angular Structural Framework dla dynamicznych aplikacji webowych + DataTables jQuery wtyczka dla złożonych tabel HTML)
GitHub:Logowanie do linku jest widoczne.
Najpierw przyjrzyjmy się efektowi po całkowania, jak pokazano poniżej:
Montaż startera
Aby użyć tabeli danych angular, musisz zainstalować Node 8.9 lub nowszy oraz NPM 6 lub nowszy.
Ten dokument dotyczy wyłącznie projektów wykorzystujących angular-cli. W rzeczywistości ekosystem front-end rozwija się w tempie, za którym już nie mogę nadążyć. Jest więc tylko tutorial do projektu angular-cli. Jeśli uda Ci się to uruchomić, na przykład projekt SystemJS, złóż pull request, aby poprawić tę dokumentację. Dziękuję!
Angular-CLI wersja 7.YZ
Polecam używać angular-cli do tworzenia i zarządzania projektami angular
Wolę ostrzec, że wersja demo jest na 7. YZ, podczas gdy nowsze wersje Angular-CLI mogą wymagać innej konfiguracji.
NPM
Zanim będziesz mógł pobrać najnowszą wersję z NPM, musisz zainstalować jego zależności:
Mój obecny projekt to Angular 6.x, a interfejs korzysta z szablonu z Bootstrap, a jQuery był już referencjonowany, więc mój własny projekt go potrzebujeSpecjalne traktowanie，
npm instaluje tylko:
Pobierz pakiet wtyczek z oficjalnej strony datatables, sprawdź Bootstrap 4 i DataTables oraz wybierz Pobierz pliki poniżej. Strona internetowa:Logowanie do linku jest widoczne.
Rozpakujemy pobrany pakiet do katalogu "src\assets\plugins\datatables.net",Numer katalogowy, proszę stwórz go samodzielnie！！！
Edytuj plik angular.json, aby dodać zależności w właściwościach skryptu i stylu:
Głównie dodawaj pliki datatables.css i datatables.js do projektu.
Konfiguracja NgModule, importuj DataTablesModule na odpowiedni poziom aplikacji.
Ponieważ moja trasa jest leniwa do ładowania trasy, jaNie do końcaImportowane w pliku "app.module.ts", proszęImportuj zgodnie z Twoją sytuacją。
Jeśli import jest błędny, błąd wygląda następująco:
core.js:1673 ERROR Error: Uncaught (in promise): Error: Template parse errors:
Nie można przypisać 'dtOptions', ponieważ nie jest to znana właściwość 'table'. ("<div class="row">
<Div Class="Col-12">
<tabela danych tabeli [BŁĄD ->]
Paginacja po stronie serwera
Strona HTML (baseinfocompany-list.component.html):
Kod CSS (musi zostać dodany, z zastrzeżeniami):
Plik baseinfocompany-list.component.scss:
plik styles.scss:
Kod typescript (baseinfocompany-list.component.ts)
Uwaga: HttpClientModule powinien być również dodany w app.module.ts, w następujący sposób:
Chińskochiński kod dla tabel danych jest następujący:
Turyści, jeśli chcecie zobaczyć ukrytą zawartość tego wpisu, proszę Odpowiedź
|
Opublikowano 29.10.2018 14:54:16
|
|
|
|
Opublikowano 10.11.2018 21:58:48
|
Weź udział w form architect