|
|
Zverejnené 29. 10. 2018 14:54:16
|
|
|
|
JQuery DataTables je veľmi užitočný plugin na zoznam dát, nemusíte si písať vlastné funkcie na triedenie stránok, filtrovanie a ďalšie funkcie, stačí vrátiť zadaný json formát, plugin vám pomôže zobraziť dáta. Ako aplikovať tento užitočný plugin na zobrazovanie tabuliek na projekty v Angulare?
Tento článok integruje Angular+bootstrap+DataTables
Oficiálna webová stránka DataTables:Prihlásenie na hypertextový odkaz je viditeľné.
Angular-Datatables:Prihlásenie na hypertextový odkaz je viditeľné.
(Angular Structural Framework pre dynamické webové aplikácie + DataTables plugin jQuery pre zložité HTML tabuľky)
GitHub:Prihlásenie na hypertextový odkaz je viditeľné.
Najprv sa pozrime na efekt po integrácii, ako je znázornené nižšie:
Inštalácia štartéra
Na použitie dátovej tabuľky Angular je potrebné nainštalovať Node 8.9 alebo novší a NPM 6 alebo novší.
Tento dokument sa zaoberá iba projektmi, ktoré používajú angular-cli. V skutočnosti front-end ekosystém rastie tempom, ktoré už nedokážem sledovať. Takže existuje len tutoriál pre projekt angular-cli. Ak sa vám podarí to rozbehnúť napríklad v projekte SystemJS, prosím, pošlite pull request na zlepšenie tejto dokumentácie. Ďakujem!
Angular-CLI verzia 7.YZ
Odporúčam používať angular-cli na tvorbu a správu angular projektov
Radšej vás varujem, že demo verzia je na 7. YZ verziu, zatiaľ čo novšie verzie Angular-CLI môžu potrebovať inú konfiguráciu.
NPM
Predtým, než získate najnovšiu verziu s NPM, musíte nainštalovať jeho závislosti:
Môj aktuálny projekt je Angular 6.x a rozhranie používa šablónu z Bootstrapu, pričom jQuery bol referencovaný, takže môj vlastný projekt ho potrebujeŠpeciálne zaobchádzanie，
NPM inštaluje len:
Stiahnite si balík pluginov z oficiálnej webovej stránky datatables, skontrolujte Bootstrap 4 a DataTables a nižšie vyberte Stiahnuť súbory. Webstránka:Prihlásenie na hypertextový odkaz je viditeľné.
Stiahnutý balík extrahujeme do adresára "src\assets\plugins\datatables.net",Katalógové číslo, prosím, vytvorte si ho sami！！！
Upravte angular.json súbor tak, aby ste pridali závislosti v skripte a vlastnostiach štýlu:
Hlavne pridávajte datatables.css a datatables.js súbory do projektu.
Konfigurácia NgModule, importujte DataTablesModule na príslušnú úroveň aplikácie.
Keďže moja trasa je lenivá na načítanie trasy, jaNie celkomImportované do súboru "app.module.ts", prosím.Importujte podľa vašej skutočnej situácie。
Ak je import nesprávny, chyba je nasledovná:
core.js:1673 ERROR Error: Uncaught (in promise): Error: Template parse errors:
Nedá sa naviazať na 'dtOptions', pretože to nie je známa vlastnosť 'table'. ("<div class="row">
<div class="col-12">
<tabuľka tabuľky [CHYBA ->]
Stránkovanie na strane servera
HTML stránka (baseinfocompany-list.component.html):
CSS kód (musí byť pridaný, s výhradami):
Súbor baseinfocompany-list.component.scss:
Súbor styles.scss:
Typescript kód (baseinfocompany-list.component.ts)
Poznámka: HttpClientModule by mal byť tiež pridaný v app.module.ts, nasledovne:
Čínsky kód pre datatables je nasledovný:
Turisti, ak chcete vidieť skrytý obsah tohto príspevku, prosím. Odpoveď
|
Predchádzajúci:Pracovníci postprodukcie filmu a televízie a tí, ktorí radi študujú, musia používať technológiu kľúčovania filmov a televíziíBudúci:npm odstráni modul na odinštalovanie
|
Zverejnené 10. 11. 2018 21:58:48
|
Zúčastniť sa architekta formulára