Το JQuery DataTables είναι ένα πολύ χρήσιμο πρόσθετο λίστας δεδομένων, δεν χρειάζεται να γράψετε τη δική σας ταξινόμηση σελιδοποίησης, φιλτράρισμα και άλλες λειτουργίες, απλώς επιστρέψτε την καθορισμένη μορφή json, η προσθήκη μπορεί να σας βοηθήσει να εμφανίσετε τα δεδομένα. Πώς να εφαρμόσετε αυτό το χρήσιμο πρόσθετο εμφάνισης πίνακα σε έργα Angular;
Αυτό το άρθρο ενσωματώνει το Angular+bootstrap+DataTables
Επίσημος ιστότοπος DataTables:Η σύνδεση με υπερσύνδεσμο είναι ορατή.
angular-datatables:Η σύνδεση με υπερσύνδεσμο είναι ορατή.
(Angular Structural Framework για δυναμικές εφαρμογές ιστού + πρόσθετο DataTables jQuery για σύνθετους πίνακες HTML)
Το GitHub:Η σύνδεση με υπερσύνδεσμο είναι ορατή.
Αρχικά, ας ρίξουμε μια ματιά στο αποτέλεσμα μετά την ενσωμάτωση, όπως φαίνεται παρακάτω:
Εγκατάσταση εκκίνησης
Για να χρησιμοποιήσετε τον πίνακα γωνιακών δεδομένων, πρέπει να εγκαταστήσετε τον κόμβο 8.9 ή νεότερη έκδοση και το NPM 6 ή νεότερη έκδοση.
Αυτό το έγγραφο ασχολείται μόνο με έργα που χρησιμοποιούν angular-cli. Στην πραγματικότητα, το οικοσύστημα front-end αναπτύσσεται με ρυθμό που δεν μπορώ πλέον να ακολουθήσω. Έτσι, υπάρχει μόνο ένα σεμινάριο για το έργο Angular-CLI. Εάν καταφέρετε να το κάνετε να λειτουργήσει, για παράδειγμα, ένα έργο SystemJS, υποβάλετε ένα αίτημα έλξης για να βελτιώσετε αυτήν την τεκμηρίωση. Ευχαριστώ!
Angular-CLI έκδοση 7.YZ
Συνιστώ τη χρήση του angular-cli για τη δημιουργία και τη διαχείριση γωνιακών έργων
Προτιμώ να σας προειδοποιήσω ότι η δοκιμαστική έκδοση είναι στο 7. YZ, ενώ οι νεότερες εκδόσεις του Angular-CLI μπορεί να χρειαστεί να έχουν διαφορετική διαμόρφωση.
ΝΠΜ
Για να μπορέσετε να αποκτήσετε την πιο πρόσφατη έκδοση με το NPM, πρέπει να εγκαταστήσετε τις εξαρτήσεις του:
Το τρέχον έργο μου είναι το Angular 6.x και η διεπαφή χρησιμοποιεί ένα πρότυπο από το Bootstrap και το jQuery έχει αναφερθεί, επομένως το δικό μου έργο το χρειάζεταιΕιδική μεταχείριση，
Το npm εγκαθιστά μόνο:
Κατεβάστε το πακέτο προσθηκών από τον επίσημο ιστότοπο των πινάκων δεδομένων, ελέγξτε το Bootstrap 4 και το DataTables και επιλέξτε Λήψη αρχείων παρακάτω. Ιστοσελίδα:Η σύνδεση με υπερσύνδεσμο είναι ορατή.
Εξάγουμε το ληφθέν πακέτο στον κατάλογο "src\assets\plugins\datatables.net",Κατάλογος Όχι, δημιουργήστε τον μόνοι σας！！！
Επεξεργαστείτε το αρχείο angular.json για να προσθέσετε εξαρτήσεις στις ιδιότητες δέσμης ενεργειών και στυλ:
Προσθέστε κυρίως αρχεία datatables.css και datatables.js στο έργο.
Παραμετροποίηση NgModule, εισαγωγή DataTablesModule στο κατάλληλο επίπεδο της εφαρμογής.
Επειδή η διαδρομή μου είναι τεμπέλης για να φορτώσω το δρόμο, εγώΌχι πραγματικάΕισήχθη στο αρχείο "app.module.ts", παρακαλώΕισαγωγή σύμφωνα με την πραγματική σας κατάσταση。
Εάν η εισαγωγή είναι λανθασμένη, το σφάλμα είναι το εξής:
core.js:1673 ERROR Error: Uncaught (in promise): Error: Template parse errors:
Δεν είναι δυνατή η σύνδεση με το 'dtOptions' αφού δεν είναι γνωστή ιδιότητα του 'table'. ("<div class="row">
<div class="col-12">
<πίνακας δεδομένων πίνακα [ΣΦΑΛΜΑ ->]
Σελιδοποίηση από την πλευρά του διακομιστή
Σελίδα HTML (baseinfocompany-list.component.html):
Κώδικας CSS (πρέπει να προστεθεί και με επιφυλάξεις):
baseinfocompany-list.component.scss αρχείο:
styles.scss:
Κωδικός γραφομηχανής (baseinfocompany-list.component.ts)
Σημείωση: Το HttpClientModule θα πρέπει επίσης να προστεθεί σε app.module.ts, ως εξής:
Ο κινεζικός κινεζικός κώδικας για πίνακες δεδομένων έχει ως εξής:
Τουρίστες, αν θέλετε να δείτε το κρυφό περιεχόμενο αυτής της ανάρτησης, παρακαλώ Απάντηση
| 
Δημοσιεύτηκε στις 29/10/2018 2:54:16 μ.μ.
|
|
|
|
Δημοσιεύτηκε στις 10/11/2018 9:58:48 μ.μ.
|
Συμμετέχετε στη φόρμα αρχιτέκτονας