将数据表整合到离子3项目中

Question

我已经使用离子3创建了网站。我想创建一个数据表，如下所示。

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

Answer 1

您可以简单地使用Angular组件https://l-lin.github.io/angular-datatables/#/welcome
在Angular 2 上工作，因此它将在离子3中使用。

使用NPM安装：

NPM安装jQuery-保存NPM install datatables.net-保存npm install datatables.net-dt-保存NPM安装Angular-databers-保存npm install @types/jquery -save-devNPM install @types/datatables.net- -save-dev

将样式和脚本复制到/资产文件夹，然后添加到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>