|
|
Objavljeno na 29. 10. 2018 14:54:16
|
|
|
|
JQuery DataTables je zelo uporaben vtičnik za seznam podatkov, ni treba pisati lastnih funkcij za sortiranje strani, filtriranje in druge funkcije, samo vrni določen json format, vtičnik ti lahko pomaga prikazati podatke. Kako uporabiti ta uporaben vtičnik za prikaz tabel na Angular projektih?
Ta članek integrira Angular+bootstrap+DataTables
Uradna spletna stran DataTables:Prijava do hiperpovezave je vidna.
Kotne podatkovne tabele:Prijava do hiperpovezave je vidna.
(Angular Structural Framework za dinamične spletne aplikacije + vtičnik za DataTables jQuery za kompleksne HTML tabele)
GitHub:Prijava do hiperpovezave je vidna.
Najprej si poglejmo učinek po integraciji, kot je prikazano spodaj:
Namestitev začetnika
Za uporabo kotne podatkovne tabele morate namestiti Node 8.9 ali novejši in NPM 6 ali novejši.
Ta dokument obravnava le projekte, ki uporabljajo angular-cli. Pravzaprav se front-end ekosistem razvija s hitrostjo, ki ji ne morem več slediti. Torej obstaja samo vodič za projekt angular-cli. Če vam uspe to spraviti v pogon, na primer projekt SystemJS, prosimo, pošljite pull request za izboljšanje te dokumentacije. Hvala!
Angular-CLI različica 7.YZ
Priporočam uporabo angular-cli za ustvarjanje in upravljanje angular projektov
Raje vas opozorim, da je demo različica na 7. YZ različica, medtem ko novejše različice Angular-CLI morda potrebujejo drugačno konfiguracijo.
NPM
Preden lahko dobite najnovejšo različico z NPM, morate namestiti njegove odvisnosti:
Moj trenutni projekt je Angular 6.x, vmesnik uporablja predlogo iz Bootstrapa, jQuery pa je bil referenciran, zato ga moj projekt potrebujePosebna obravnava，
NPM namešča samo:
Prenesite paket vtičnikov z uradne spletne strani datatables, preverite Bootstrap 4 in DataTables ter spodaj izberite Prenesi datoteke. Spletna stran:Prijava do hiperpovezave je vidna.
Prenesen paket izvlečemo v mapo "src\assets\plugins\datatables.net",Številka kataloga, prosim, ustvarite jo sami！！！
Uredite angular.json datoteko, da dodate odvisnosti v lastnosti skripte in sloga:
Predvsem dodajte datatables.css in datatables.js datoteke v projekt.
NgModule konfiguracija, uvoz DataTablesModule na ustrezno raven aplikacije.
Ker je moja pot lenobna za nalaganje poti, semNe ravnoUvoženo v datoteko "app.module.ts", prosimUvozite glede na vašo dejansko situacijo。
Če je uvoz napačen, je napaka naslednja:
core.js:1673 ERROR Error: Uncaught (in promise): Error: Template parse errors:
Ne morem se vezati na 'dtOptions', ker to ni znana lastnost 'table'. ("<div class="row">
<div razred="col-12">
<tabela podatkovna tabela [NAPAKA ->]
Strežniška paginacija
HTML stran (baseinfocompany-list.component.html):
CSS koda (mora biti dodana, z izjemami):
datoteka baseinfocompany-list.component.scss:
Datoteka styles.scss:
Typescript koda (baseinfocompany-list.component.ts)
Opomba: HttpClientModule je treba dodati tudi v app.module.ts, kot sledi:
Kitajska koda za podatkovne tabele je naslednja:
Turisti, če želite videti skrito vsebino te objave, prosim Odgovoriti
|
Prejšnji:Delavci v postprodukciji filma in televizije ter tisti, ki radi študirajo, morajo uporabljati tehnologijo ključanja filmov in televizijeNaslednji:npm odstrani modul za odstranitev
|
Objavljeno na 10. 11. 2018 21:58:48
|
Sodelovanje v arhitektu obrazcev