|
|
Veröffentlicht am 29.10.2018 14:54:16
|
|
|
|
JQuery DataTables ist ein sehr nützliches Datenlisten-Plugin, du musst keine eigenen Paginierungssortier-, Filter- und andere Funktionen schreiben, du musst einfach das angegebene JSON-Format zurückgeben, das Plugin kann dir helfen, die Daten darzustellen. Wie wendet man dieses nützliche Table Display Plugin auf Angular-Projekte an?
Dieser Artikel integriert Angular+Bootstrap+DataTables
Offizielle Website von DataTables:Der Hyperlink-Login ist sichtbar.
Winkeldatentabellen:Der Hyperlink-Login ist sichtbar.
(Angular Structural Framework für dynamische Webanwendungen + DataTables jQuery-Plugin für komplexe HTML-Tabellen)
GitHub:Der Hyperlink-Login ist sichtbar.
Zunächst werfen wir einen Blick auf den Effekt nach der Integration, wie unten gezeigt:
Starterinstallation
Um die anguläre Datentabelle zu verwenden, musst du Node 8.9 oder später und NPM 6 oder später installieren.
Dieses Dokument behandelt nur Projekte, die angular-cli verwenden. Tatsächlich wächst das Frontend-Ökosystem in einem Tempo, dem ich nicht mehr folgen kann. Es gibt also nur ein Tutorial für das Angular-Cli-Projekt. Wenn es Ihnen gelingt, es zum Beispiel bei einem SystemJS-Projekt zum Laufen zu bringen, senden Sie bitte eine Pull Request, um diese Dokumentation zu verbessern. Vielen Dank!
Angular-CLI Version 7.YZ
Ich empfehle, angular-cli zu verwenden, um angular-Projekte zu erstellen und zu verwalten
Ich möchte dich warnen, dass die Demo-Version auf 7 verfügbar ist. YZ-Version, während neuere Versionen von Angular-CLI möglicherweise eine andere Konfiguration benötigen.
NPM
Bevor du die neueste Version mit NPM bekommen kannst, musst du dessen Abhängigkeiten installieren:
Mein aktuelles Projekt ist Angular 6.x, und die Benutzeroberfläche verwendet eine Vorlage von Bootstrap, und jQuery wurde bereits erwähnt, daher braucht mein eigenes Projekt dasSonderbehandlung，
NPM installiert nur:
Laden Sie das Plug-in-Paket von der offiziellen Website der Datatables herunter, prüfen Sie Bootstrap 4 und DataTables und wählen Sie unten Dateien herunterladen. Website:Der Hyperlink-Login ist sichtbar.
Wir extrahieren das heruntergeladene Paket in das Verzeichnis "src\assets\plugins\datatables.net",Katalog Nr., bitte erstellen Sie es selbst！！！
Bearbeiten Sie die angular.json-Datei, um Abhängigkeiten in den Skript- und Stileigenschaften hinzuzufügen:
Füge hauptsächlich datatables.css und datatables.js Dateien zum Projekt hinzu.
NgModule-Konfiguration, importiere DataTablesModule auf die entsprechende Ebene der Anwendung.
Da meine Route faul ist, um den Weg zu laden, habe ichNicht wirklichBitte in der Datei "app.module.ts" importiertImportiere entsprechend deiner aktuellen Situation。
Wenn der Import falsch ist, lautet der Fehler wie folgt:
core.js:1673 ERROR Error: Uncaught (in promise): Error: Template parse errors:
Ich kann nicht an 'dtOptions' binden, da es keine bekannte Eigenschaft von 'table' ist. ("<Div-Klasse="Reihe">
<Div-Klasse="COL-12">
<Tabellen-Datentabelle [FEHLER ->]
Serverseitige Paginierung
HTML-Seite (baseinfocompany-list.component.html):
CSS-Code (muss hinzugefügt werden, und mit Vorbehalten):
baseinfocompany-list.component.scss Datei:
styles.scss-Datei:
Typescript-Code (baseinfocompany-list.component.ts)
Hinweis: HttpClientModule sollte ebenfalls in app.module.ts hinzugefügt werden, wie folgt:
Der chinesisch-chinesische Code für Datentabellen lautet wie folgt:
Touristen, wenn ihr den versteckten Inhalt dieses Beitrags sehen wollt, bitte Antwort
|
Vorhergehend:Film- und Fernseh-Postproduktionsmitarbeiter sowie diejenigen, die gerne studieren, müssen Film- und Fernseh-Keying-Technologie verwendenNächster:npm entfernt das Deinstallationsmodul
|
Veröffentlicht am 10.11.2018 21:58:48
|
Nehmen Sie am Formarchitekten teil