javascript Angular2 + jquery数据表（原始）

Posted 2021-05-03

// install datatables and dependencies

npm install jquery --save
npm install @types/jquery --save-dev

npm install datatables.net --save
npm install datatables.net-bs4 --save

// add necessary css

@import "~bootstrap/dist/css/bootstrap.css";
@import "~datatables.net-bs4/css/dataTables.bootstrap4.css";

// fetch data

import { HttpClient } from '@angular/common/http';
import { Component, OnInit } from '@angular/core';
import { Subscription } from 'rxjs/Subscription';


@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  // Our array of clients
  clients: any[];

  constructor(private http: HttpClient){}

  ngOnInit(){
    this.http.get('https://5a5a9e00bc6e340012a03796.mockapi.io/clients')
      .subscribe((data: any[]) => this.clients = data);
  }
  
}

// Display the data in a normal HTML table using *ngFor directive

`
<div class="container">
  <h1>Clients list</h1>
  
  <table class="table table-hover" cellspacing="0">
    <thead>
      <tr>
        <th>First Name</th>
        <th>Last Name</th>
        <th>Company</th>
      </tr>
    </thead>
    <tbody>
      <tr *ngFor="let client of clients">
        <td>{{client.firstName}}</td>
        <td>{{client.lastName}}</td>
        <td>{{client.company}}</td>
      </tr>
    </tbody>
  </table>
</div>
`



// import necessary libraries in your component

import * as $ from 'jquery';
import 'datatables.net';
import 'datatables.net-bs4';


// Now, you can use the legendary $ inside of your TypeScript class !
// Declare a dataTable property on our class which will hold our DataTable instance :

export class AppComponent implements OnInit {
  // Our array of clients
  clients: any[];
  // Our future instance of DataTable
  dataTable: any;


// Now you could be tempted to just do this :

ngOnInit(){
  this.http.get('https://5a5a9e00bc6e340012a03796.mockapi.io/clients')
    .subscribe((data: any[]) => this.clients = data);

    const table: any = $('table');
    this.dataTable = table.DataTable();
}

// You could think it worked just fine, but it did not !
// At the the time you instanciated the DataTable, your data were not even arrived from the server and were not filled into the HTML table, 
// so jQuery DataTables was not able to address them correctly : search, pagination and everthing else won’t work !

// you’ll have to wait for the data to arrive before you can instanciate the DataTable :

ngOnInit(){
  this.http.get('https://5a5a9e00bc6e340012a03796.mockapi.io/clients')
    .subscribe((data: any[]) => {
      this.clients = data;

      // Now you can use jQuery DataTables :
      const table: any = $('table');
      this.dataTable = table.DataTable();
    });
}

// But still, it does not work ! You have to understand that **jQuery DataTables relies on what data actualy are into the HTML Table to work properly**.
// The fact that data has arrived from the server to our TypeScript file does not mean that it is actualy into the HTML template.
// Indeed, it won’t be in the HTML Table until the next Angular Change Detection process (when Angular sees a change in our TypeScript class and propagate it to our HTML template) !
// We can ask Angular to procede to a Change Detection when we decide it ! In order to do so, you have to ask for the injection of a special dependency : the Change Detector itself !

// Adding a reference to the change detector in our constructor 
constructor(private http: HttpClient, private chRef: ChangeDetectorRef){}

// Now that we have access to the ChangeDetector anywhere in our TypeScript Class, we can use it to trigger the detection of changes before the instanciation of our DataTable !
// The data will be projected to our HTML template before we ask jQuery DataTables to handle them :

ngOnInit(){
  this.http.get('https://5a5a9e00bc6e340012a03796.mockapi.io/clients')
    .subscribe((data: any[]) => {
      this.clients = data;

      // You'll have to wait that changeDetection occurs and projects data into 
      // the HTML template, you can ask Angular to that for you ;-)
      this.chRef.detectChanges();

      // Now you can use jQuery DataTables :
      const table: any = $('table');
      this.dataTable = table.DataTable();
    });
}

// * Notice that if you are using a Realtime Database as Firebase, you will have to destroy and reinstanciate the DataTable each time the data changes.