如何在typescript应用程序中创建Angular-DataTable

npm install -g @angular/cli

ng new my-app

cd my-app

npm install angular-datatables

"styles": [
  "node_modules/datatables.net-dt/css/jquery.dataTables.css"
]

"scripts": [
  "node_modules/jquery/dist/jquery.js",
  "node_modules/datatables.net/js/jquery.dataTables.js"
]

ng generate component datatable

<table datatable [dtOptions]="dtOptions" class="table table-striped">
  <thead>
    <tr>
      <th>ID</th>
      <th>Name</th>
      <th>Email</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let user of users">
      <td>{{ user.id }}</td>
      <td>{{ user.name }}</td>
      <td>{{ user.email }}</td>
    </tr>
  </tbody>
</table>

import { Component, OnInit } from '@angular/core';
import { DataTablesOptions } from 'angular-datatables';

@Component({
  selector: 'app-datatable',
  templateUrl: './datatable.component.html',
  styleUrls: ['./datatable.component.css']
})
export class DatatableComponent implements OnInit {
  dtOptions: DataTablesOptions = {};

  users = [
    { id: 1, name: 'John Doe', email: 'john@example.com' },
    { id: 2, name: 'Jane Smith', email: 'jane@example.com' },
    { id: 3, name: 'Bob Johnson', email: 'bob@example.com' }
  ];

  constructor() { }

  ngOnInit() {
    this.dtOptions = {
      pagingType: 'full_numbers',
      pageLength: 10
    };
  }
}

<app-datatable></app-datatable>

ng serve