web-dev-qa-db-fra.com

Utilisation du plugin Datatables complet avec Angular 6

J'essaie d'ajouter le plugin Datatables (datatables.net) à mon projet angualar 6 . Je ne sais pas comment inclure les fichiers css, js et autres fichiers nécessaires dans mon projet avec l'installateur npm . Après. en sélectionnant les options nécessaires, je suis la méthode d'installation de NPM avec celles-ci: 

npm install --save datatables.net-bs4
npm install --save datatables.net-buttons-bs4
npm install --save datatables.net-colreorder-bs4
npm install --save datatables.net-responsive-bs4
npm install --save datatables.net-rowgroup-bs4
npm install --save datatables.net-scroller-bs4

Après l'installation, je ne sais pas comment vais-je les utiliser dans mon projet. mon projet utilise ngx-bootstrap (/ https://www.npmjs.com/package/ngx-bootstrap ) pour le style.

style.scss // where I am only importing my css theme from node_modules

Dans ngx-bootstrap, les styles sont des composants, et j'utilise ceux-ci facilement . Alors, comment puis-je utiliser les fonctionnalités de datatables en tant que composant? atteindre les installations de données sur une page?

Si quelqu'un l'a fait s'il vous plaît faites le moi savoir, ou des suggestions seront appréciées.

Merci.

angulardatatablesangular-datatablesngx-bootstrap
3
Fahim Uddin

utiliser des tables de données angulaires dans Angular 6 angular-datatables

Vous devez installer ses dépendances avant d'obtenir la dernière version à l'aide de NPM:

npm install jquery --save
npm install datatables.net --save
npm install datatables.net-dt --save
npm install [email protected] --save
npm install @types/jquery --save-dev
npm install @types/datatables.net --save-dev

angular.json

 enter image description here

Importer le DataTablesModule dans app.module.ts

import { DataTablesModule } from 'angular-datatables';

imports: [
    DataTablesModule
  ],

mon datatableslibrary.ts

import { Component, OnDestroy, OnInit } from '@angular/core';
import { Http, Response } from '@angular/http';
import { Subject } from 'rxjs';
import { HttpClient } from '@angular/common/http';
import { DataService } from '../data.service';

@Component({
  selector: 'app-datatableslibrary',
  templateUrl: './datatableslibrary.component.html',
  styleUrls: ['./datatableslibrary.component.css']
})
export class DatatableslibraryComponent implements OnInit, OnDestroy {

  users$: any[] = [];
  dtOptions: DataTables.Settings = {};
  dtTrigger: Subject<any> = new Subject();

  constructor(private http: HttpClient, private data: DataService) {
  }

  ngOnInit() {
    this.dtOptions = {
      pagingType: 'full_numbers',
      pageLength: 5,
      processing: true
    };
    this.data.getUsers().subscribe(data => {
      this.users$ = data;
      this.dtTrigger.next();
    });
  }

  ngOnDestroy(): void {
    this.dtTrigger.unsubscribe();
  }

}

my datatableslibrary.component.html

<table class="table table-striped table-bordered table-sm row-border hover" datatable [dtOptions]="dtOptions"
  [dtTrigger]="dtTrigger">
  <thead>
    <tr>
      <th>Name</th>
      <th>Email</th>
      <th>Website</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let user of users$">
      <td>{{ user.name }}</td>
      <td>{{ user.email }}</td>
      <td>{{ user.website }}</td>
    </tr>
  </tbody>
</table>

 enter image description here

7
Sanjay kumar

J'ai obtenu des DataTables en procédant comme suit:

angular.json

     "styles": [
          "src/styles.css",
          "node_modules/bootstrap/dist/css/bootstrap.min.css",
          "node_modules/datatables.net-dt/css/jquery.dataTables.css"
        ],
        "scripts": [
          "node_modules/jquery/dist/jquery.js",
          "node_modules/datatables.net/js/jquery.dataTables.js"
        ]

app.module.ts

        import {DataTablesModule} from 'angular-datatables';


        imports: [
                 ...
                 DataTablesModule
                ]

Vous devrez peut-être vous arrêter et vous rappeler pour voir les changements.

1
user10038293

Ajoutez simplement vos fichiers .css dans la section styles et les fichiers .js dans la section Scripts, dans angular (-cli) .json. Je pense que cela résoudrait vos problèmes.

0
shaan26

Vous trouverez une réponse complète ici: https://medium.com/apprendre-le-web-avec-lior/angular-5-and-jquery-datatables-fd1dd2d81d99

Suivez les étapes et tout ira bien 

0
Crying Freeman

En regardant simplement la question et la réponse de @dickrichie, il me restait une erreur:

ERROR in node_modules/angular-datatables/src/angular-datatables.directive.d.ts(1
,23): error TS2688: Cannot find type definition file for 'datatables.net'.
node_modules/angular-datatables/src/angular-datatables.directive.d.ts(15,16): er
ror TS2503: Cannot find namespace 'DataTables'.
node_modules/angular-datatables/src/angular-datatables.directive.d.ts(27,25): er
ror TS2503: Cannot find namespace 'DataTables'.

Il me manquait les deux dernières étapes d’installation pour que Datatables.net fonctionne avec Angular 6.

npm install jquery --save
npm install datatables.net --save
npm install datatables.net-dt --save
npm install angular-datatables --save
npm install @types/datatables.net --save-dev

Suivez ensuite le message de @dickrichie pour modifier les fichiers angular.json et app.module.ts. Maintenant, toute balise de table où vous ajoutez "datatable" devrait fonctionner.

-- MODIFIER 

La première partie de cette réponse concerne l'utilisation d'angular-datatables, mais comme @fahimuddin a demandé comment faire cela sans ce paquet, j'ai essayé différemment.

Donc, pas besoin d'installer les deux derniers paquets, le fichier angular.json est identique à celui de @dickrichie answer et à un composant que je viens d'ajouter avant le @Component:

declare var $: any;

Et utilisez ensuite directement jQuery et Datatables dans ngOnInit ():

$('#your-datatable-id').DataTable();

Cela fonctionne et personne ne se plaint mais je ne suis pas sûr que ce soit une bonne pratique? (Et comme dans mon cas j'essaye de faire une application Angular-Electron, elle ne fonctionne toujours pas dans Electron, elle ne fonctionnait pas non plus avec une date angulaire, mais c'est un autre problème!)

0
Claire

Ajouter DataTablesModule.forRoot() dans les importations de appmodule.ts fonctionne! Ou si vous utilisez un chargement paresseux, n'oubliez pas de le mettre dans chaque module.ts

0
abrsh