JQuery DataTables is een zeer nuttige datalijst-plugin, je hoeft niet je eigen pagina-sortering, filtering en andere functies te schrijven, geef gewoon het opgegeven json-formaat terug, de plugin kan je helpen de data weer te geven. Hoe pas je deze nuttige table display-plugin toe op Angular-projecten?
Dit artikel integreert Angular+bootstrap+DataTables
Officiële website van DataTables:De hyperlink-login is zichtbaar.
Hoekdatatabellen:De hyperlink-login is zichtbaar.
(Angular Structural Framework voor dynamische webapplicaties + DataTables jQuery-plugin voor complexe HTML-tabellen)
GitHub:De hyperlink-login is zichtbaar.
Laten we eerst kijken naar het effect na integratie, zoals hieronder weergegeven:
Startinstallatie
Om de hoekdatatabel te gebruiken, moet je Node 8.9 of hoger installeren en NPM 6 of hoger.
Dit document behandelt alleen projecten die angular-cli gebruiken. Sterker nog, het front-end ecosysteem groeit in een tempo dat ik niet langer kan volgen. Er is dus alleen een tutorial voor het angular-cli-project. Als het je lukt om het werkend te krijgen, bijvoorbeeld een SystemJS-project, dien dan een pull request in om deze documentatie te verbeteren. Bedankt!
Angular-CLI versie 7.YZ
Ik raad aan om angular-cli te gebruiken om angular-projecten te maken en te beheren
Ik waarschuw je liever dat de demoversie op 7 is. YZ-versie, terwijl nieuwere versies van Angular-CLI mogelijk een andere configuratie nodig hebben.
NPM
Voordat je de nieuwste versie met NPM kunt krijgen, moet je de afhankelijkheden installeren:
Mijn huidige project is Angular 6.x, en de interface gebruikt een sjabloon van Bootstrap, en jQuery is al genoemd, dus mijn eigen project heeft het nodigSpeciale behandeling，
NPM installeert alleen:
Download het plug-inpakket van de officiële website van de datatables, bekijk Bootstrap 4 en DataTables, en selecteer hieronder bestanden downloaden. Website:De hyperlink-login is zichtbaar.
We pakken het gedownloade pakket uit naar de map "src\assets\plugins\datatables.net",Catalogus nr., maak het alstublieft zelf aan！！！
Bewerk het angular.json-bestand om afhankelijkheden toe te voegen aan de script- en stijleigenschappen:
Vooral datatables.css en datatables.js bestanden aan het project toevoegen.
NgModule-configuratie, importeer DataTablesModule naar het juiste niveau van de applicatie.
Omdat mijn route lui is om de route te laden, ikNiet echtGeïmporteerd in het "app.module.ts"-bestand, alstublieftImporteer volgens je huidige situatie。
Als de import fout is, is de fout als volgt:
core.js:1673 ERROR Error: Uncaught (in promise): Error: Template parse errors:
Kan niet binden aan 'dtOptions' omdat het geen bekende eigenschap van 'table' is. ("<div class="Row">
<div class="col-12">
<tabeldatatabel [FOUT ->]
Server-side paginering
HTML-pagina (baseinfocompany-list.component.html):
CSS-code (moet worden toegevoegd, en met kanttekeningen):
baseinfocompany-list.component.scss bestand:
Styles.scss-bestand:
Typescript-code (baseinfocompany-list.component.ts)
Opmerking: HttpClientModule moet ook in app.module.ts worden toegevoegd, als volgt:
De Chinese Chinese code voor datatabellen is als volgt:
Toeristen, als jullie de verborgen inhoud van dit bericht willen zien, alsjeblieft Antwoord
|
Geplaatst op 29-10-2018 14:54:16
|
|
|
|
Geplaatst op 10-11-2018 21:58:48
|
Neem deel aan de vormarchitect