JQuery DataTables on erittäin hyödyllinen tietolistalisäosa, ei tarvitse kirjoittaa omia sivujen lajittelua, suodatusta tai muita toimintoja, palauta vain määritetty json-muoto, lisäosa voi auttaa sinua näyttämään tiedot. Miten soveltaa tätä hyödyllistä taulukkonäyttöpluginia Angular-projekteihin?
Tässä artikkelissa yhdistetään Angular+bootstrap+DataTables
DataTablesin virallinen verkkosivusto:Hyperlinkin kirjautuminen on näkyvissä.
angular-datatables:Hyperlinkin kirjautuminen on näkyvissä.
(Angular Structural Framework dynaamisille web-sovelluksille + DataTables jQuery -lisäosa monimutkaisille HTML-tauluille)
GitHub:Hyperlinkin kirjautuminen on näkyvissä.
Katsotaanpa ensin vaikutusta integraation jälkeen, kuten alla on esitetty:
Käynnistysasennus
Kulmadatataulukon käyttämiseksi sinun täytyy asentaa Node 8.9 tai uudempi sekä NPM 6 tai uudempi.
Tämä dokumentti käsittelee vain projekteja, jotka käyttävät angular-cli:tä. Itse asiassa front-end-ekosysteemi kasvaa vauhtia, jota en enää pysty seuraamaan. Joten angular-cli-projektille on olemassa vain opastus. Jos onnistut saamaan sen toimimaan, esimerkiksi SystemJS-projektissa, lähetä pull-request tämän dokumentaation parantamiseksi. Kiitos!
Angular-CLI versio 7.YZ
Suosittelen angular-cli:n käyttöä angular-projektien luomiseen ja hallintaan
Haluan mieluummin varoittaa, että demoversio on 7. YZ-versiossa, kun taas uudemmissa Angular-CLI-versioissa voi olla oltava erilainen kokoonpano.
NPM
Ennen kuin saat uusimman version NPM:llä, sinun täytyy asentaa sen riippuvuudet:
Nykyinen projektini on Angular 6.x, ja käyttöliittymä käyttää Bootstrapin mallipohjaa, ja jQueryyn on viitattu, joten oma projektini tarvitsee senErityiskohtelu，
NPM asentaa vain:
Lataa lisäosapaketti datatablesin viralliselta verkkosivustolta, tarkista Bootstrap 4 ja DataTables, ja valitse alla Lataa tiedostot. Verkkosivusto:Hyperlinkin kirjautuminen on näkyvissä.
Poimimme ladatun paketin "src\assets\plugins\datatables.net" -hakemistoon,Katalogi Ei, luo se itse！！！
Muokkaa angular.json-tiedostoa lisätäksesi riippuvuuksia skriptin ja tyylin ominaisuuksiin:
Lisään pääasiassa datatables.css- ja datatables.js-tiedostoja projektiin.
NgModule-konfiguraatio, tuo DataTablesModule sovelluksen oikealle tasolle.
Koska reittini on laiska lastata reittiä, minäEi oikeastaanTuotu "app.module.ts"-tiedostoon, kiitosTuo tilanteesi mukaan。
Jos tuonti on väärä, virhe on seuraava:
core.js:1673 ERROR Error: Uncaught (in promise): Error: Template parse errors:
Ei voi sitoa 'dtOptions'-tiedostoon, koska se ei ole tunnettu ominaisuus 'table'-tiedostolle. ("<div class="row">
<div class="col-12">
<table datatable [ERROR ->]
Palvelinpuolen sivutus
HTML-sivu (baseinfocompany-list.component.html):
CSS-koodi (täytyy lisätä, ja varauksin):
baseinfocompany-list.component.scss-tiedosto:
styles.scss-tiedosto:
Typescript-koodi (baseinfocompany-list.component.ts)
Huomautus: Myös HttpClientModule tulisi lisätä vuonna app.module.ts seuraavasti:
Kiinan kiinalainen koodi datataulukoille on seuraava:
Turistit, jos haluatte nähdä tämän postauksen piilotetun sisällön, olkaa hyvä Vastaus
|
Julkaistu 29.10.2018 14.54.16
|
|
|
|
Julkaistu 10.11.2018 21.58.48
|
Osallistu arkkitehdin muotoon