JQuery DataTables est un plugin de liste de données très utile, pas besoin d’écrire vos propres fonctions de tri de pagination, de filtrage et autres, il suffit de retourner le format json spécifié, le plugin peut vous aider à afficher les données. Comment appliquer ce plugin utile d’affichage de table aux projets Angular ?
Cet article intègre Angular+bootstrap+DataTables
Site officiel de DataTables :La connexion hyperlientérée est visible.
Tables de données angulaires :La connexion hyperlientérée est visible.
(Angular Structural Framework pour applications web dynamiques + plugin DataTables jQuery pour tables HTML complexes)
GitHub :La connexion hyperlientérée est visible.
Tout d’abord, examinons l’effet après intégration, comme montré ci-dessous :
Installation du démarreur
Pour utiliser la table de données angulaire, il faut installer Node 8.9 ou ultérieur et NPM 6 ou ultérieur.
Ce document ne traite que des projets utilisant l’angle de cli. En fait, l’écosystème front-end croît à un rythme que je ne peux plus suivre. Il n’existe donc qu’un tutoriel pour le projet angular-cli. Si vous parvenez à le faire fonctionner, par exemple un projet SystemJS, veuillez soumettre une pull request pour améliorer cette documentation. Merci!
Version 7.YZ de l’Angular-CLI
Je recommande d’utiliser angular-cli pour créer et gérer des projets Angular
Je préfère vous prévenir que la version démo est sur la version 7. YZ, tandis que les versions plus récentes d’Angular-CLI peuvent nécessiter une configuration différente.
NPM
Avant de pouvoir obtenir la dernière version avec NPM, vous devez installer ses dépendances :
Mon projet actuel est Angular 6.x, et l’interface utilise un modèle de Bootstrap, et jQuery a été référencée, donc mon propre projet en a besoinTraitement spécial，
Installations uniquement de NPM :
Téléchargez le module complémentaire depuis le site officiel des datatables, consultez Bootstrap 4 et DataTables, et sélectionnez Télécharger les fichiers ci-dessous. Site internet:La connexion hyperlientérée est visible.
Nous extravons le paquet téléchargé dans le dossier « src\assets\plugins\datatables.net »,Catalogue Non, crée-le toi-même s’il te plaît！！！
Modifiez le fichier angular.json pour ajouter des dépendances dans le script et les propriétés de style :
J’ajoute principalement des fichiers datatables.css et datatables.js au projet.
NgModule, importez DataTablesModule au niveau approprié de l’application.
Comme mon itinéraire est paresseux pour charger le trajet, jePas vraimentImporté dans le fichier « app.module.ts », s’il vous plaîtImportez selon votre situation réelle。
Si l’importation est incorrecte, l’erreur est la suivante :
core.js:1673 ERROR Error: Uncaught (in promise): Error: Template parse errors:
Impossible de lier à 'dtOptions' car ce n’est pas une propriété connue de 'table'. (« <div class="row">
<classe div="col-12">
<table de données [ERREUR ->]
Pagination côté serveur
Page HTML (baseinfocompany-list.component.html) :
Code CSS (doit être ajouté, avec des réserves) :
fichier baseinfocompany-list.component.scss :
Styles.scss :
Code typescript (baseinfocompany-list.component.ts)
Note : HttpClientModule doit également être ajouté en app.module.ts, comme suit :
Le code chinois chinois pour les datatables est le suivant :
Touristes, si vous voulez voir le contenu caché de ce post, s’il vous plaît Répondre
|
Publié sur 29/10/2018 14:54:16
|
|
|
|
Publié sur 10/11/2018 21:58:48
|
Participez à l’architecture de forme