it-swarm.com.de

Verwenden des voll ausgestatteten Datatables Plugins mit Angular 6

Ich versuche, das Datatables-Plugin (datatables.net) mit meinem angualar 6-Projekt ..__ hinzuzufügen. Ich bin nicht sicher, wie ich die erforderlichen Dateien css, js und andere erforderliche Dateien in mein Projekt mit dem npm-Installationsprogramm ..__ einfügen sollte Wenn ich meine notwendigen Optionen auswähle, folge ich der NPM-Install-Methode mit diesen: 

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

Nach der Installation bin ich nicht sicher, wie ich diese in meinem Projekt verwenden werde. Mein Projekt verwendet ngx-bootstrap ( https://www.npmjs.com/package/ngx-bootstrap ) zum Styling.

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

In ngx-bootstrap sind die Stile komponentenorientiert, und ich verwende diese problemlos. So kann ich Datatables-Funktionen als Komponente verwenden? Wo sollte ich die CSS-Dateien und die erforderlichen JS-Dateien einfügen? die Datentabellen-Funktionen auf einer Seite erreichen?

Wenn jemand es getan hat, lass es mich wissen oder Anregungen werden gebeten.

Vielen Dank.

3
Fahim Uddin

verwenden Sie Winkeltabellen in Angular 6 Winkeldatentabellen

Sie müssen die Abhängigkeiten installieren, bevor Sie die neueste Version mit NPM erhalten:

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

angle.json

 enter image description here

Importiere das DataTablesModule in app.module.ts

import { DataTablesModule } from 'angular-datatables';

imports: [
    DataTablesModule
  ],

meine 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

Ich habe DataTables zum Laufen gebracht, indem ich Folgendes getan habe:

eckig.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
                ]

Sie müssen möglicherweise anhalten und erneut dienen, um Änderungen zu sehen.

1
user10038293

Fügen Sie einfach Ihre .css-Dateien im Abschnitt "Styles" und ".js" im Abschnitt "Scripts" in "angle (-cli) .json" hinzu. Ich denke, das würde deine Probleme lösen.

0
shaan26

Eine vollständige Antwort finden Sie hier: https://medium.com/apprendre-le-web-avec-lior/angular-5-and-jquery-datatables-fd1dd2d81d99

Folgen Sie den Schritten und Sie werden in Ordnung sein 

0
Crying Freeman

Beim Anschauen der Frage und der Antwort von @dickrichie hatte ich immer noch einen Fehler:

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'.

Ich habe die letzten beiden Installationsschritte verpasst, damit Datatables.net mit Angular 6 funktioniert.

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

Folgen Sie dann der Nachricht von @dickrichie, um die Dateien angle.json und app.module.ts zu bearbeiten. Nun sollte jedes Tabellen-Tag funktionieren, an dem Sie "datatable" hinzufügen.

- BEARBEITEN 

Der erste Teil dieser Antwort bezieht sich auf die Verwendung von Winkeldatentabellen, aber als @fahimuddin tatsächlich fragte, wie dies ohne dieses Paket zu tun sei, versuchte ich es anders.

Die letzten beiden Pakete müssen nicht installiert werden. Die Datei angle.json sieht genauso aus wie in @dickrichie answer und in einer Komponente, die ich vor der @Component hinzugefügt habe:

declare var $: any;

Und dann direkt jQuery und Datatables in ngOnInit () verwenden:

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

Es funktioniert und niemand beschwert sich, aber ich bin nicht sicher, ob es eine gute Praxis ist. (Und wie in meinem Fall versuche ich, eine Angular-Electron-App zu erstellen, funktioniert sie immer noch nicht in Electron, sie funktioniert auch nicht mit Angular-Datable, aber das ist ein anderes Problem!)

0
Claire

Hinzufügen von DataTablesModule.forRoot() beim Importieren von appmodule.ts works! Oder wenn Sie ein Lazy Loading verwenden, denken Sie daran, es in jeden module.ts einzufügen.

0
abrsh