JQuery DataTables è un plugin molto utile per liste dati, non è necessario scrivere le tue funzioni di ordinamento paginazione, filtraggio e altre funzioni, basta restituire il formato json specificato, il plugin può aiutarti a visualizzare i dati. Come applicare questo utile plugin per la visualizzazione delle tabelle ai progetti Angular?
Questo articolo integra Angular+bootstrap+DataTables
Sito ufficiale di DataTables:Il login del link ipertestuale è visibile.
Tabelle di dati angolari:Il login del link ipertestuale è visibile.
(Angular Structural Framework per applicazioni web dinamiche + plugin DataTables jQuery per tabelle HTML complesse)
GitHub:Il login del link ipertestuale è visibile.
Per prima cosa, diamo un'occhiata all'effetto dopo l'integrazione, come mostrato di seguito:
Installazione del motorino di avviamento
Per usare la tabella dati Angular, devi installare Node 8.9 o successiva e NPM 6 o successiva.
Questo documento riguarda solo progetti che utilizzano angular-cli. In effetti, l'ecosistema front-end sta crescendo a un ritmo che non riesco più a seguire. Quindi esiste solo un tutorial per il progetto angular-cli. Se riesci a farlo funzionare, ad esempio un progetto SystemJS, invia una pull request per migliorare questa documentazione. Grazie!
Angular-CLI versione 7.YZ
Consiglio di usare angular-cli per creare e gestire progetti Angular
Preferisco avvertirti che la versione demo è su 7. YZ, mentre le versioni più recenti di Angular-CLI potrebbero dover avere una configurazione diversa.
NPM
Prima di poter ottenere l'ultima versione con NPM, devi installarne le dipendenze:
Il mio progetto attuale è Angular 6.x, e l'interfaccia utilizza un template di Bootstrap, e jQuery è stato citato, quindi il mio progetto ne ha bisognoTrattamento speciale，
Installazioni solo NPM:
Scarica il pacchetto plug-in dal sito ufficiale delle datatables, controlla Bootstrap 4 e DataTables, e seleziona Scarica file qui sotto. Sito web:Il login del link ipertestuale è visibile.
Estraiamo il pacchetto scaricato nella directory "src\assets\plugins\datatables.net",Catalogo No, per favore crealo tu stesso！！！
Modifica il file angular.json per aggiungere dipendenze nello script e nelle proprietà dello stile:
Principalmente aggiungere datatables.css e datatables.js file al progetto.
Configurazione del modulo ng, importare DataTablesModule al livello appropriato dell'applicazione.
Dato che il mio percorso è pigro per caricare la strada, ioNon proprioImportato nel file "app.module.ts", per favoreImportare in base alla tua situazione reale。
Se l'importazione è sbagliata, l'errore è il seguente:
core.js:1673 ERROR Error: Uncaught (in promise): Error: Template parse errors:
Non si può associare a 'dtOptions' perché non è una proprietà nota di 'table'. ("<div class="row">
<classe div="col-12">
<tabella datitable [ERRORE ->]
Paginazione lato server
Pagina HTML (baseinfocompany-list.component.html):
Codice CSS (deve essere aggiunto, con delle precisazioni):
filefileinfocompany-list.component.scss:
Styles.scss:
Codice typescript (baseinfocompany-list.component.ts)
Nota: HttpClientModule dovrebbe essere aggiunto anche in app.module.ts, come segue:
Il codice cinese per le tabelle dati è il seguente:
Turisti, se volete vedere il contenuto nascosto di questo post, vi prego Risposta
|
Pubblicato su 29/10/2018 14:54:16
|
|
|
|
Pubblicato su 10/11/2018 21:58:48
|
Partecipa all'architetto di forma