JQuery DataTables er en veldig nyttig dataliste-plugin, du trenger ikke skrive egne pagineringssortering, filtrering og andre funksjoner, bare returner det angitte json-formatet, pluginen kan hjelpe deg med å vise dataene. Hvordan bruke denne nyttige tabellvisningspluginen på Angular-prosjekter?
Denne artikkelen integrerer Angular+bootstrap+DataTables
DataTables offisielle nettside:Innloggingen med hyperkoblingen er synlig.
Vinkeldatatabeller:Innloggingen med hyperkoblingen er synlig.
(Angular Structural Framework for dynamiske webapplikasjoner + DataTables jQuery-plugin for komplekse HTML-tabeller)
GitHub:Innloggingen med hyperkoblingen er synlig.
La oss først se på effekten etter integrasjon, som vist nedenfor:
Starterinstallasjon
For å bruke vinkeldatatabellen må du installere Node 8.9 eller nyere og NPM 6 eller nyere.
Dette dokumentet omhandler kun prosjekter som bruker angular-cli. Faktisk vokser front-end-økosystemet i et tempo jeg ikke lenger klarer å følge. Så det finnes bare en veiledning for angular-cli-prosjektet. Hvis du klarer å få det til å fungere, for eksempel et SystemJS-prosjekt, vennligst send inn en pull request for å forbedre denne dokumentasjonen. Takk!
Angular-CLI versjon 7.YZ
Jeg anbefaler å bruke angular-cli for å lage og administrere angular-prosjekter
Jeg foretrekker å advare deg om at demoversjonen er på 7. YZ-versjonen, mens nyere versjoner av Angular-CLI kan trenge en annen konfigurasjon.
NPM
Før du kan få den nyeste versjonen med NPM, må du installere avhengighetene:
Mitt nåværende prosjekt er Angular 6.x, og grensesnittet bruker en mal fra Bootstrap, og jQuery har blitt referert til, så mitt eget prosjekt trenger detSpesiell behandling，
Kun NPM-installasjoner:
Last ned plug-in-pakken fra datatablenes offisielle nettside, sjekk Bootstrap 4 og DataTables, og velg Last ned filer nedenfor. Nettside:Innloggingen med hyperkoblingen er synlig.
Vi pakker ut den nedlastede pakken til katalogen "src\assets\plugins\datatables.net",Katalog Nei, vennligst lag det selv！！！
Rediger angular.json-filen for å legge til avhengigheter i skript- og stilegenskapene:
Legg hovedsakelig til datatables.css og datatables.js filer til prosjektet.
NgModule-konfigurasjon, importer DataTablesModule til riktig nivå i applikasjonen.
Siden ruten min er lat med å laste veien, jegIkke egentligImportert i "app.module.ts"-filen, takkImporter etter din faktiske situasjon。
Hvis importen er feil, er feilen som følger:
core.js:1673 ERROR Error: Uncaught (in promise): Error: Template parse errors:
Kan ikke binde til 'dtOptions' siden det ikke er en kjent egenskap ved 'table'. ("<div class="Row">
<div klasse="col-12">
<tabelldatatabell [FEIL ->]
Serverside-paginering
HTML-side (baseinfocompany-list.component.html):
CSS-kode (må legges til, og med forbehold):
baseinfocompany-list.component.scss fil:
styles.scss-fil:
Typescript-kode (baseinfocompany-list.component.ts)
Merk: HttpClientModule bør også legges til i app.module.ts, som følger:
Den kinesiske koden for datatabeller er som følger:
Turister, hvis dere vil se det skjulte innholdet i dette innlegget, vær så snill Svare
| 
Publisert på 29.10.2018 14:54:16
|
|
|
|
Publisert på 10.11.2018 21:58:48
|
Delta i formarkitekten