JQuery DataTables är ett mycket användbart datalist-plugin, du behöver inte skriva egna sidor, sortering, filtrering och andra funktioner, returnera bara det angivna json-formatet, pluginet kan hjälpa dig att visa datan. Hur applicerar man detta användbara table display-plugin på Angular-projekt?
Denna artikel integrerar Angular+bootstrap+DataTables
DataTables officiella webbplats:Inloggningen med hyperlänken är synlig.
Vinkeldatatabeller:Inloggningen med hyperlänken är synlig.
(Angular Structural Framework för dynamiska webbapplikationer + DataTables jQuery-plugin för komplexa HTML-tabeller)
GitHub:Inloggningen med hyperlänken är synlig.
Först, låt oss titta på effekten efter integration, som visas nedan:
Startinstallation
För att använda den vinkelmässiga datatabellen måste du installera Node 8.9 eller senare och NPM 6 eller senare.
Detta dokument behandlar endast projekt som använder angular-cli. Faktum är att front-end-ekosystemet växer i en takt som jag inte längre kan följa. Så det finns bara en handledning för angular-cli-projektet. Om du lyckas få det att fungera, till exempel ett SystemJS-projekt, vänligen skicka in en pull request för att förbättra denna dokumentation. Tack!
Angular-CLI version 7.YZ
Jag rekommenderar att använda angular-cli för att skapa och hantera angular-projekt
Jag vill varna dig för att demoversionen finns på 7. YZ-versionen, medan nyare versioner av Angular-CLI kan behöva en annan konfiguration.
NPM
Innan du kan få den senaste versionen med NPM behöver du installera dess beroenden:
Mitt nuvarande projekt är Angular 6.x, och gränssnittet använder en mall från Bootstrap, och jQuery har refererats, så mitt eget projekt behöver detSärskild behandling，
NPM installerar enbart:
Ladda ner plug-in-paketet från datatables:s officiella webbplats, kontrollera Bootstrap 4 och DataTables och välj Ladda ner filer nedan. Webbplats:Inloggningen med hyperlänken är synlig.
Vi extraherar det nedladdade paketet till katalogen "src\assets\plugins\datatables.net",Katalog Nej, var snäll och skapa den själv！！！
Redigera angular.json-filen för att lägga till beroenden i skript- och stilegenskaperna:
Lägg främst till datatables.css och datatables.js filer till projektet.
NgModule-konfiguration, importera DataTablesModule till lämplig nivå i applikationen.
Eftersom min rutt är lat att ladda vägen, jagInte riktigtImporterad i "app.module.ts"-filen, tackImportera enligt din faktiska situation。
Om importen är fel är felet följande:
core.js:1673 ERROR Error: Uncaught (in promise): Error: Template parse errors:
Kan inte binda till 'dtOptions' eftersom det inte är en känd egenskap för 'table'. ("<div class="rad">
<divisionsklass="col-12">
<tabell datatabell [FEL ->]
Serversidning
HTML-sida (baseinfocompany-list.component.html):
CSS-kod (måste läggas till, och med förbehåll):
baseinfocompany-list.component.scss fil:
Styles.scss-fil:
Typescript-kod (baseinfocompany-list.component.ts)
Obs: HttpClientModule bör också läggas till i app.module.ts, enligt följande:
Den kinesiska kinesiska koden för datatabeller är följande:
Turister, om ni vill se det dolda innehållet i detta inlägg, snälla Svar
| 
Publicerad på 2018-10-29 14:54:16
|
|
|
|
Publicerad på 2018-11-10 21:58:48
|
Delta i formarkitekten