将数据表集成到 Ionic 3 项目中答案

【问题标题】：Integrate Data-table into Ionic 3 project将数据表集成到 Ionic 3 项目中
【发布时间】：2018-08-05 13:49:03
【问题描述】：

我使用 Ionic 3 创建了网站。我想创建一个像 here 所示的数据表。

如何将此库集成到我的网站上？
我应该做什么特定于 Ionic/Angular 上下文？

【问题讨论】：

标签： angular ionic2 ionic3 angular-ui-bootstrap bootstrap-4

【解决方案1】：

您可以简单地使用 Angular 组件https://l-lin.github.io/angular-datatables/#/welcome
适用于 angular 2+，因此它适用于 Ionic 3。

使用 NPM 安装：

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

将样式和脚本复制到 /assets 文件夹并添加到 index.html

<link href="assets/css/jquery.dataTables.css" rel="stylesheet">
<script src="assets/js/jquery.js"></script>
<script src="assets/js/jquery.dataTables.js></script>

在 app.module.ts 中导入依赖

import { DataTablesModule } from 'angular-datatables';

添加到导入部分：

  imports: [
    ...,
    DataTablesModule
  ],

使用组件：将指令datatable添加到html标签：

<table datatable [dtOptions]="dtOptions">
<thead>
  <tr>
    <th>ID</th>
    <th>First name</th>
    <th>Last name</th>
  </tr>
</thead>
<tbody>
  <tr *ngFor="let person of persons">
    <td>{{ person.id }}</td>
    <td>{{ person.firstName }}</td>
    <td>{{ person.lastName }}</td>
  </tr>
</tbody>
</table>

【讨论】：