|
|
Zveřejněno 29.10.2018 14:54:16
|
|
|
|
JQuery DataTables je velmi užitečný plugin pro datový seznam, není potřeba psát vlastní funkce pro třídění stránkování, filtrování a další funkce, stačí vrátit specifikovaný json formát, plugin vám pomůže data zobrazit. Jak aplikovat tento užitečný plugin pro zobrazení stolů na projekty v Angularu?
Tento článek integruje Angular+bootstrap+DataTables
Oficiální web DataTables:Přihlášení k hypertextovému odkazu je viditelné.
Angular-Datatables:Přihlášení k hypertextovému odkazu je viditelné.
(Angular Structural Framework pro dynamické webové aplikace + DataTables plugin jQuery pro složité HTML tabulky)
GitHub:Přihlášení k hypertextovému odkazu je viditelné.
Nejprve se podívejme na efekt po integraci, jak je ukázáno níže:
Instalace startéru
Pro použití datové tabulky Angular je potřeba nainstalovat Node 8.9 nebo novější a NPM 6 nebo vyšší.
Tento dokument se zabývá pouze projekty využívajícími angular-cli. Ve skutečnosti front-end ekosystém roste tempem, které už nedokážu sledovat. Takže existuje jen tutoriál pro projekt angular-cli. Pokud se vám to podaří rozchodit například na projektu SystemJS, pošlete prosím pull request pro zlepšení této dokumentace. Děkuju!
Angular-CLI verze 7.YZ
Doporučuji používat angular-cli pro tvorbu a správu angular projektů
Raději vás varuji, že demo verze je na 7. YZ verzi, zatímco novější verze Angular-CLI mohou potřebovat jinou konfiguraci.
NPM
Než získáte nejnovější verzi s NPM, musíte nainstalovat jeho závislosti:
Můj současný projekt je Angular 6.x a rozhraní používá šablonu z Bootstrapu, jQuery byl zmíněn, takže můj vlastní projekt ho potřebujeZvláštní zacházení，
NPM instaluje pouze:
Stáhněte si balíček pluginů z oficiálních stránek datatables, zkontrolujte Bootstrap 4 a DataTables a níže vyberte Stáhnout soubory. Web:Přihlášení k hypertextovému odkazu je viditelné.
Stažený balíček rozbalujeme do adresáře "src\assets\plugins\datatables.net",Katalogové číslo, prosím, vytvořte si to sami！！！
Upravte angular.json soubor tak, abyste přidali závislosti ve skriptu a style:
Hlavně přidávej do projektu datatables.css a datatables.js soubory.
NgModule konfigurace, importovat DataTablesModule na příslušnou úroveň aplikace.
Protože moje trasa je líná na nakládání cesty, jáAni neImportováno v souboru "app.module.ts", prosímImportujte podle vaší skutečné situace。
Pokud je import nesprávný, chyba je následující:
core.js:1673 ERROR Error: Uncaught (in promise): Error: Template parse errors:
Nelze navázat na 'dtOptions', protože to není známá vlastnost 'table'. ("<div class="row">
<Div class="col-12">
<tabulková datatabulka [ERROR ->]
Stránkování na straně serveru
HTML stránka (baseinfocompany-list.component.html):
CSS kód (musí být přidán, s výhradami):
soubor baseinfocompany-list.component.scss:
Soubor styles.scss:
Typescript kód (baseinfocompany-list.component.ts)
Poznámka: HttpClientModule by měl být také přidán v app.module.ts, a to následovně:
Čínský kód pro datatables je následující:
Turisté, pokud chcete vidět skrytý obsah tohoto příspěvku, prosím Odpověď
|
Předchozí:Pracovníci postprodukce filmu a televize a ti, kteří rádi studují, musí používat technologie klíčování filmu a televizeDalší:npm odstraní modul pro odinstalaci
|
Zveřejněno 10.11.2018 21:58:48
|
Zapojte se do formového architekta