|
|
Opslået på 29/10/2018 14.54.16
|
|
|
|
JQuery DataTables er et meget nyttigt dataliste-plugin, du behøver ikke skrive dine egne pagineringssorteringer, filtrering og andre funktioner, bare returner det angivne json-format, plugin'et kan hjælpe dig med at vise dataene. Hvordan anvender man dette nyttige tabeldisplay-plugin på Angular-projekter?
Denne artikel integrerer Angular+bootstrap+DataTables
DataTables officielle hjemmeside:Hyperlink-login er synlig.
Vinkeldatatabeller:Hyperlink-login er synlig.
(Angular Structural Framework til dynamiske webapplikationer + DataTables jQuery-plugin til komplekse HTML-tabeller)
GitHub:Hyperlink-login er synlig.
Lad os først se på effekten efter integration, som vist nedenfor:
Startinstallation
For at bruge den vinkelmæssige datatabel skal du installere Node 8.9 eller senere og NPM 6 eller nyere.
Dette dokument omhandler kun projekter, der bruger angular-CLI. Faktisk vokser front-end-økosystemet i et tempo, jeg ikke længere kan følge. Så der findes kun en vejledning til angular-cli-projektet. Hvis du formår at få det til at fungere, for eksempel et SystemJS-projekt, så indsend venligst en pull request for at forbedre denne dokumentation. Tak!
Angular-CLI version 7.YZ
Jeg anbefaler at bruge angular-cli til at oprette og administrere angular-projekter
Jeg vil advare dig om, at demoversionen er på 7. YZ-versionen, mens nyere versioner af Angular-CLI muligvis skal have en anden konfiguration.
NPM
Før du kan få den nyeste version med NPM, skal du installere dens afhængigheder:
Mit nuværende projekt er Angular 6.x, og brugerfladen bruger en skabelon fra Bootstrap, og jQuery er blevet refereret til, så mit eget projekt har brug for detSærbehandling，
NPM installerer kun:
Download plug-in-pakken fra datatables' officielle hjemmeside, tjek Bootstrap 4 og DataTables, og vælg Download filer nedenfor. Hjemmeside:Hyperlink-login er synlig.
Vi udtrækker den downloadede pakke til mappen "src\assets\plugins\datatables.net",Katalog Nej, lav det venligst selv！！！
Rediger angular.json-filen for at tilføje afhængigheder i script- og stilegenskaberne:
Tilføj primært datatables.css og datatables.js filer til projektet.
NgModule-konfiguration, importer DataTablesModule til det relevante niveau i applikationen.
Da min rute er doven til at indlæse vejen, jegIkke rigtigtImporteret i "app.module.ts"-filen, takImporter efter din faktiske situation。
Hvis importen er forkert, er fejlen som følger:
core.js:1673 ERROR Error: Uncaught (in promise): Error: Template parse errors:
Kan ikke binde til 'dtOptions', da det ikke er en kendt egenskab ved 'table'. ("<div class="row">
<div klasse="col-12">
<tabeldatatabel [FEJL ->]
Serverside-paginering
HTML-side (baseinfocompany-list.component.html):
CSS-kode (skal tilføjes, og med forbehold):
baseinfocompany-list.component.scss fil:
Styles.scss-fil:
Typescript-kode (baseinfocompany-list.component.ts)
Bemærk: HttpClientModule bør også tilføjes i app.module.ts, som følger:
Den kinesiske kinesiske kode for datatabeller er som følger:
Turister, hvis I vil se det skjulte indhold i dette indlæg, så vær venlig Svar
|
Tidligere:Film- og tv-postproduktionsarbejdere samt dem, der kan lide at studere, skal bruge film- og tv-nøgleteknologiNæste:NPM fjerner afinstallationsmodulet
|
Opslået på 10/11/2018 21.58.48
|
Deltag i formarkitekten