JQuery DataTables este un plugin foarte util pentru liste de date, nu e nevoie să scrii propriile funcții de sortare a paginațiilor, filtrare și alte funcții, doar returnează formatul json specificat, pluginul te poate ajuta să afișezi datele. Cum să aplic acest plugin util pentru afișarea tabelelor în proiectele Angular?
Acest articol integrează Angular+bootstrap+DataTables
Site-ul oficial DataTables:Autentificarea cu hyperlink este vizibilă.
Tabele-date unghiulare:Autentificarea cu hyperlink este vizibilă.
(Angular Structural Framework pentru aplicații web dinamice + pluginul DataTables jQuery pentru tabele HTML complexe)
GitHub:Autentificarea cu hyperlink este vizibilă.
Mai întâi, să aruncăm o privire asupra efectului după integrare, așa cum se arată mai jos:
Instalarea demaratorului
Pentru a folosi tabelul de date angular, trebuie să instalezi Node 8.9 sau mai târziu și NPM 6 sau mai târziu.
Acest document se ocupă doar de proiecte care folosesc angular-cli. De fapt, ecosistemul front-end crește într-un ritm pe care nu-l mai pot urmări. Așadar, există doar un tutorial pentru proiectul angular-cli. Dacă reușești să faci să funcționeze, de exemplu un proiect SystemJS, te rugăm să trimiți o pull request pentru a îmbunătăți această documentație. Vă mulțumesc!
Angular-CLI versiunea 7.YZ
Recomand să folosești angular-cli pentru a crea și gestiona proiecte angular
Prefer să te avertizez că versiunea demo este pe 7. versiunea YZ, în timp ce versiunile mai noi ale Angular-CLI pot necesita o configurație diferită.
NPM
Înainte să poți obține cea mai recentă versiune cu NPM, trebuie să instalezi dependențele sale:
Proiectul meu actual este Angular 6.x, iar interfața folosește un șablon din Bootstrap, iar jQuery a fost referențiat, deci proiectul meu are nevoie de elTratament special，
Instalări doar NPM:
Descarcă pachetul plug-in de pe site-ul oficial al datatables, verifică Bootstrap 4 și DataTables și selectează Descarcă fișiere mai jos. Site:Autentificarea cu hyperlink este vizibilă.
Extragem pachetul descărcat în directorul "src\assets\plugins\datatables.net",Catalog Nu, te rog să-l creezi tu！！！
Editează fișierul angular.json pentru a adăuga dependențe în proprietățile scriptului și stilului:
În principal, adaug datatables.css și datatables.js fișiere în proiect.
Configurarea NgModule, importarea DataTablesModule la nivelul corespunzător al aplicației.
Deoarece traseul meu este leneș să încarc drumul, euNu chiarImportați în fișierul "app.module.ts", vă rogImportă în funcție de situația ta reală。
Dacă importul este greșit, eroarea este următoarea:
core.js:1673 ERROR Error: Uncaught (in promise): Error: Template parse errors:
Nu se poate lega de 'dtOptions' deoarece nu este o proprietate cunoscută a 'table'. ("<div class="row">
<div class="col-12">
<tabelă de date [EROARE ->]
Paginare pe partea de server
Pagină HTML (baseinfocompany-list.component.html):
Cod CSS (trebuie adăugat și cu rezerve):
fișier baseinfocompany-list.component.scss:
fișier styles.scss:
Cod typescript (baseinfocompany-list.component.ts)
Notă: HttpClientModule ar trebui adăugat și în app.module.ts, după cum urmează:
Codul chinezesc pentru tabelele de date este următorul:
Turiști, dacă vreți să vedeți conținutul ascuns al acestei postări, vă rog Răspunde
|
Postat pe 29.10.2018 14:54:16
|
|
|
|
Postat pe 10.11.2018 21:58:48
|
Participă la formularul arhitect