使用Angular DataTables来构建功能丰富的表格

前端小工
2,091 阅读7分钟

数据表的出现是为了简化数据的可视化、分组、查询和排序过程。通常情况下，一个表格只是数据的表格形式，没有什么特别之处。但是一个数据表可以提供多种功能，包括数据排序、数据查询、数据更新、分页、打印和数据导出等等。

在Angular这样的框架中使用数据表，会带来一些复杂的问题，因为Angular会对其代码库进行不断的更新。

  • 废弃的代码。我们将在本文中使用的Angular DataTables不支持旧版本的Angular CLI（Angular 8及以下）。甚至旧版本的Node和npm也使用过时的代码，因此不能使用该服务。
  • 配置。每个开发者都会同意，有些配置是非常麻烦的，Angular中的数据表配置也不例外

什么是Angular DataTables？

Angular DataTables是一个用于构建复杂HTML表格的库，它使用jQuery的DataTables插件。它的配置支持TypeScript，并针对Angular 2+进行了优化。

Angular DataTables会在以下情况下派上用场。

  • 你有一个非常大的数据集从一个或多个API端点进来
  • 你需要自定义数据排序/过滤
  • 你需要从一个表格中导出和打印数据

Angular DataTables的功能可以大致分为两组：基本和高级。由此可见，Angular DataTables还支持一些扩展功能。

基本功能

  • 使用AJAX调用直接加载数据
  • 在你的Angular组件中进行列渲染等选项
  • 使用自定义函数进行表的渲染dtTrigger
  • 服务器端处理（尽管你需要覆盖AJAX选项）

高级功能

  • 自定义过滤，包括通过数字、字符串、布尔运算等进行过滤。
  • 单独的列过滤，按列进行数据排序
  • 数据表的重新渲染
  • 可以同时显示多个表格
  • 可以在Angular组件中添加路由器链接，可以在新页面中显示单个数据实例
  • 在数据表中添加管道，将数据转换为你想要的格式

安装Angular DataTables

现在让我们深入到安装和使用Angular DataTables。首先，我们将安装我们的Angular应用程序，然后将DataTables安装到该应用程序中。

ng new angular-datatable

当Angular安装完成后，你可以进入终端的目录并安装DataTables。

cd angular-datable

ng add angular-datatables

这将把jQuery和DataTables插件添加到你的angular.json 文件和你的应用程序中。当安装完成后，你可以在app.module.ts 中导入你的数据表模块，在整个应用程序中使用它。

// src/app/app.module.ts

import {DataTablesModule} from 'angular-datatables';

imports: [
  BrowserModule,
  AppRoutingModule,
  DataTablesModule,
],

进行API调用

我们将使用JSONPlaceholderAPI来为我们的数据表填充信息，以使Angular DataTables发挥其作用。

要做到这一点，我们首先要在我们的app.module.ts 文件中添加HttpClient 模块，以使其在我们的服务中可用于HTTP请求。我们通过导入它并在imports 数组中调用它来做到这一点。

// src/app/app.module.ts

import { HttpClientModule } from '@angular/common/http';

imports: [
  BrowserModule,
  AppRoutingModule,
  DataTablesModule,
  HttpClientModule
],

创建一个Angular服务

我们将创建一个Angular服务，它将与我们的HTTP模块通信，从我们的API中获取数据。为了生成这个服务，我们将在终端运行以下命令。

ng generate service services/users/users

这将在我们的src/app 文件夹中创建一个新的文件目录，包含我们的users.services.ts 文件。

-| Users/
    users.service.spec.ts
    users.services.ts

然后我们可以在我们的users.service.ts 文件中导入我们的HttpClient 。

// src/app/services/users/users.service.ts

import { HttpClient } from '@angular/common/http';

constructor(private http: HttpClient) { }

接下来，我们添加我们的函数，它将从API链接中获取用户。

users() {
  this.http.get('https://jsonplaceholder.typicode.com/users');
}

生成一个组件

创建服务后，我们再生成一个组件，名称为users ，它将保存我们从刚刚创建的服务中获得的数据，并在我们的HTML页面中显示。我们还将使用users 组件来创建我们的数据表和所有的功能。

要创建一个组件，只需运行以下命令。

ng generate component components/users

消耗API

在我们的users 组件中，我们将消费从我们创建的服务中获取的API数据，并将其存储在一个名为allUsers 的数组中。

import { UsersService } from '../../services/users/users.service';

export class UsersComponent implements OnInit {

  allUsers: any = [];
  constructor(private service: UsersService) { }

  ngOnInit(): void {
    this.users();
  }

  users(): void {
    this.service
        .users()
        .subscribe((response: any) => {
          this.allUsers = response.data;
        });
  }

}

然后我们用我们获取的用户来填充我们的users.component.html 。

<div class="container">
    <div class="card m-5 p-3">
        <div class="card-body">
            <table class="table table-bordered table-striped table-hover">
                <thead>
                <tr>
                    <th>ID</th>
                    <th>Name</th>
                    <th>Username</th>
                    <th>Email</th>
                    <th>Phone number</th>
                    <th>Address</th>
                </tr>
                </thead>
                <tbody>
                <tr *ngFor="let user of allUsers">
                    <td>{{ user.id }}</td>
                    <td>{{ user.name }}</td>
                    <td>{{ user.username }}</td>
                    <td>{{ user.email }}</td>
                    <td>{{ user.phone }}</td>
                    <td>{{ user.address.street }}, {{ user.address.city }}</td>
                </tr>
                </tbody>
            </table>
        </div>

    </div>
</div>

它将显示类似这样的内容。

Users Data Table Without Styling

现在这一切都完成了，请掰开你的手指，因为我们即将深入研究数据表的使用和操作😋

添加我们的数据表

因为我们已经在app.module.ts 中添加了我们的数据表模块，所以我们不必在我们的组件中导入它；我们只需使用rxjs 将其作为一个主题来调用。

// src/app/components/users/users.components.ts
import {Subject} from 'rxjs';
...

export class UsersComponent implements OnInit {

  dtOptions: DataTables.Settings = {};
  dtTrigger: Subject<any> = new Subject<any>();

}

然后我们将我们的unsubscribe 函数添加到AngularOnDestroy 模块中。

import { Component, OnInit, OnDestroy } from '@angular/core';

export class UsersComponent implements OnInit, OnDestroy {
  ...
}

ngOnDestroy(): void {
  this.dtTrigger.unsubscribe();
}

这将在我们每次离开连接到该组件的页面时重置数据表。

有了这些，我们现在将在我们的users 函数中添加一个数据表，在我们的组件HTML中添加一个用户表。

users(): void {
  this.service
      .users()
      .subscribe((response: any) => {
        this.allUsers = response;
        // initiate our data table
        this.dtTrigger.next();
      });
}

<table class="table table-bordered table-striped table-hover" datatable [dtOptions]="dtOptions" [dtTrigger]="dtTrigger">
  ...
</table>

过滤和分页已经被添加到表中，你可以在下面的图片中注意到。

Users Data Table with Filtering and Pagination Options

自定义过滤

有时，我们可能希望以自己的方式搜索呈现给最终用户的数据。常见的例子包括数字范围搜索（在两个数字之间）和日期范围搜索。Angular DataTables允许你轻松地进行这些自定义搜索。

注意，Angular DataTables中自定义过滤的文档是有问题的，主要是因为TypeScript与Angular的更新，所以请跟随我的例子。

为了启动自定义过滤，我们将首先导入一个@ViewChild 装饰器，它允许我们向组件类注入对其模板内使用的元素的引用。

import {Component, OnInit, OnDestroy, ViewChild} from '@angular/core';

然后，我们在我们的组件中导入DataTableDirective 。

import {DataTableDirective} from 'angular-datatables';

然后，我们引用我们的DataTableDirective ，并将其分配给一个新的变量datatableElement 。之后，我们将创建max 和min 变量，这两个变量将为我们的自定义过滤提供最大和最小数字。

让我们从引用开始。

@ViewChild(DataTableDirective, {static: false})
datatableElement: any = DataTableDirective;

min: any = 0;
max: any = 0;

接下来，我们在我们的ngOnInit 中使用自定义函数进行过滤。

ngOnInit(): void {
  ...

  $.fn.dataTable.ext.search.push((settings: any, data: string[], dataIndex: any) => {
    const id = parseFloat(data[0]) || 0; // use data for the id column
    return (Number.isNaN(this.min) && Number.isNaN(this.max)) ||
        (Number.isNaN(this.min) && id <= this.max) ||
        (this.min <= id && Number.isNaN(this.max)) ||
        (this.min <= id && id <= this.max);
  });
}

这将获得max 和min 数字，获取数据，然后更新数据表。接下来，我们创建一个函数，通过id 来过滤数据表。

filterById(): void {
  this.datatableElement.dtInstance.then((dtInstance: DataTables.Api) => {
    dtInstance.draw();
  });
}

现在，当我们退出页面时，它会重新启动数据表。

ngOnDestroy(): void {
  ...
  $.fn.dataTable.ext.search.pop();
}

完成这一切后，我们再更新我们的users.components.html 页面，启动我们的filterById 函数。

<form (submit)="filterById()">
    <label>
        Min
        <input type="number" name="min" id="min" [(ngModel)]="min" />
    </label>
    <label>
        Max
        <input type="number" name="max" id="max" [(ngModel)]="max" />
    </label>
    <button class="btn btn-primary" type="submit">Filter by ID</button>
</form>
<br />

就这样--我们可以通过id 来使用自定义的过滤功能。

按钮扩展

如上所述，Angular DataTables支持一些扩展，其中之一就是按钮扩展。按钮扩展允许我们将我们的表格数据导出并复制成一个文件。当我们想在不给应用程序访问权的情况下分享数据时，这特别有用。

要使用DataTables按钮扩展，请使用下面的命令安装其插件。

# If you want to export excel files
npm install jszip --save
# JS file
npm install datatables.net-buttons --save
# CSS file
npm install datatables.net-buttons-dt --save
# Typings
npm install @types/datatables.net-buttons --save-dev

然后在scripts 和styles 属性中添加依赖项。

{
  "projects": {
    "your-app-name": {
      "architect": {
        "build": {
          "options": {
            "styles": [
              ...
              "node_modules/datatables.net-buttons-dt/css/buttons.dataTables.css"
            ],
            "scripts": [
              ...
              "node_modules/jszip/dist/jszip.js",
              "node_modules/datatables.net-buttons/js/dataTables.buttons.js",
              "node_modules/datatables.net-buttons/js/buttons.colVis.js",
              "node_modules/datatables.net-buttons/js/buttons.flash.js",
              "node_modules/datatables.net-buttons/js/buttons.html5.js",
              "node_modules/datatables.net-buttons/js/buttons.print.js"
            ],
            ...
}

然后，我们在我们的ngOnInit 中包含这些配置。

ngOnInit(): void {
  this.dtOptions = {
    // Declare the use of the extension in the dom parameter
    dom: 'Bfrtip',
  };
}

这就是结果--复制、Excel、CSV和打印等按钮已经被添加。

Users Data Table with Buttons Added

当涉及到定制你的数据表时，还有许多选项可供选择。通过一些调整，你可以按照你的规格来塑造它，它将为你建立的任何东西带来完美的效果。

总结

就这样，我们介绍了Angular DataTables和它的功能。我们还将它应用于一个应用程序，使用了它的一些功能，并探索了按钮的扩展。由于Angular TypeScript的更新，我对原始文档做了一些修改。我希望这个教程能给你一个简单易行的分解，告诉你如何在你的Angular应用程序中使用Angular DataTables。

The postUsing Angular DataTables to build feature-rich tablesappeared first onLogRocket Blog.

avatar
文章
阅读
粉丝