Angular7 之 Datatable 数据表格实现-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，数据表格是常见的展示数据的方式。在 Angular7 中，可以使用 Datatable 来实现数据表格的展示和交互。本文将详细介绍 Angular7 中 Datatable 的使用，包括如何创建、配置和使用 Datatable，以及如何实现一些常见的功能。

创建 Datatable

首先，需要在 Angular7 项目中安装 Datatable。可以使用以下命令：

npm install angular-datatables --save

安装完毕后，需要在 app.module.ts 中引入 Datatable 模块：

// javascriptcn.com 代码示例
import { DataTablesModule } from 'angular-datatables';

@NgModule({
  imports: [
    DataTablesModule
  ],
  ...
})
export class AppModule { }

接下来，可以在组件中使用 Datatable。需要在组件的 HTML 模板中添加 Datatable 的标签，并通过 dtOptions 和 dtColumns 属性来配置 Datatable。

// javascriptcn.com 代码示例
<table datatable [dtOptions]="dtOptions" [dtColumns]="dtColumns" class="row-border hover">
  <thead>
    <tr>
      <th>编号</th>
      <th>姓名</th>
      <th>年龄</th>
      <th>性别</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>张三</td>
      <td>20</td>
      <td>男</td>
    </tr>
    <tr>
      <td>2</td>
      <td>李四</td>
      <td>22</td>
      <td>男</td>
    </tr>
    <tr>
      <td>3</td>
      <td>王五</td>
      <td>21</td>
      <td>女</td>
    </tr>
  </tbody>
</table>

在组件的 TypeScript 文件中，需要定义 dtOptions 和 dtColumns 属性，以配置 Datatable。

// javascriptcn.com 代码示例
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent {
  dtOptions: DataTables.Settings = {};
  dtColumns: DataTables.ColumnSettings[] = [
    { title: '编号', data: 'id' },
    { title: '姓名', data: 'name' },
    { title: '年龄', data: 'age' },
    { title: '性别', data: 'gender' }
  ];
}

在上面的代码中，dtOptions 是 Datatable 的配置选项，可以配置 Datatable 的一些基本属性，例如分页、排序、搜索等。dtColumns 是 Datatable 的列配置，可以配置每一列的标题和对应的数据字段。

配置 Datatable

除了上面的基本配置外，还可以对 Datatable 进行更详细的配置。例如，可以配置 Datatable 的分页选项、排序选项、搜索选项、过滤选项等。

分页选项

可以通过 dtOptions 属性来配置 Datatable 的分页选项。以下是一些常见的分页选项：

dtOptions: DataTables.Settings = {
  pagingType: 'full_numbers',
  pageLength: 10,
  lengthMenu: [ 5, 10, 25, 50, 100 ],
  displayStart: 0,
  paging: true,
  info: true
};

在上面的代码中，pagingType 可以设置分页类型，例如 simple、simple_numbers、full、full_numbers 等；pageLength 可以设置每页显示的记录数；lengthMenu 可以设置每页显示记录数的选项；displayStart 可以设置起始记录位置；paging 可以设置是否显示分页控件；info 可以设置是否显示记录信息。

排序选项

可以通过 dtColumns 属性来配置 Datatable 的排序选项。以下是一些常见的排序选项：

dtColumns: DataTables.ColumnSettings[] = [
  { title: '编号', data: 'id', orderable: true },
  { title: '姓名', data: 'name', orderable: true },
  { title: '年龄', data: 'age', orderable: true },
  { title: '性别', data: 'gender', orderable: true },
];

在上面的代码中，orderable 可以设置是否允许排序。

搜索选项

可以通过 dtOptions 属性来配置 Datatable 的搜索选项。以下是一些常见的搜索选项：

dtOptions: DataTables.Settings = {
  searching: true,
  searchDelay: 500,
  search: {
    regex: true,
    caseInsensitive: true
  }
};

在上面的代码中，searching 可以设置是否显示搜索控件；searchDelay 可以设置搜索延迟时间；search 可以设置搜索选项，例如是否启用正则表达式、是否忽略大小写等。

过滤选项

可以通过 dtColumns 属性来配置 Datatable 的过滤选项。以下是一些常见的过滤选项：

dtColumns: DataTables.ColumnSettings[] = [
  { title: '编号', data: 'id', searchable: false },
  { title: '姓名', data: 'name', searchable: true },
  { title: '年龄', data: 'age', searchable: true },
  { title: '性别', data: 'gender', searchable: true },
];

在上面的代码中，searchable 可以设置是否允许过滤。

实现功能

除了基本的展示和交互外，Datatable 还可以实现一些常见的功能，例如导出数据、自定义列、行编辑等。

导出数据

可以使用 buttons 扩展来实现导出数据的功能。需要先安装 datatables.net-buttons 和 datatables.net-buttons/js/buttons.html5.js，并引入 ButtonsModule。

// javascriptcn.com 代码示例
import { DataTablesModule } from 'angular-datatables';
import { ButtonsModule } from 'angular-datatables/buttons';

@NgModule({
  imports: [
    DataTablesModule,
    ButtonsModule
  ],
  ...
})
export class AppModule { }

然后，在 dtOptions 中配置 dom 和 buttons 属性，即可添加导出按钮。

dtOptions: DataTables.Settings = {
  dom: 'Bfrtip',
  buttons: [
    'copy', 'csv', 'excel', 'pdf', 'print'
  ]
};

在上面的代码中，dom 可以设置 Datatable 的 DOM 结构，例如显示搜索控件、显示分页控件、显示导出按钮等；buttons 可以设置需要显示的按钮，例如复制、导出 CSV、导出 Excel、导出 PDF、打印等。

自定义列

可以使用 render 属性来自定义列的展示方式。例如，可以将性别字段的值转换为中文。

// javascriptcn.com 代码示例
dtColumns: DataTables.ColumnSettings[] = [
  { title: '编号', data: 'id' },
  { title: '姓名', data: 'name' },
  { title: '年龄', data: 'age' },
  {
    title: '性别',
    data: 'gender',
    render: function(data: any, type: any, full: any) {
      return data === 'male' ? '男' : '女';
    }
  }
];

在上面的代码中，render 函数可以接收三个参数，分别为当前单元格的数据、当前数据类型（例如显示、排序、过滤等）、当前行的所有数据。

行编辑

可以使用 editable 扩展来实现行编辑的功能。需要先安装 datatables.net-rowreorder 和 datatables.net-rowreorder/js/rowReorder.js，并引入 RowReorderModule。

// javascriptcn.com 代码示例
import { DataTablesModule } from 'angular-datatables';
import { RowReorderModule } from 'angular-datatables/row-reorder';

@NgModule({
  imports: [
    DataTablesModule,
    RowReorderModule
  ],
  ...
})
export class AppModule { }

然后，在 dtOptions 中配置 rowReorder 属性，即可启用行编辑。

dtOptions: DataTables.Settings = {
  rowReorder: true
};

在上面的代码中，rowReorder 可以设置是否启用行编辑。启用行编辑后，可以拖动行来改变顺序，也可以通过 row-reorder 事件来获取拖动后的顺序。

<table datatable [dtOptions]="dtOptions" [dtColumns]="dtColumns" (row-reorder)="onRowReorder($event)">
  ...
</table>

onRowReorder(event: any) {
  console.log('New order:', event);
}

在上面的代码中，onRowReorder 函数可以接收一个参数，表示拖动后的顺序。可以在该函数中将顺序保存到数据库中。

总结

本文介绍了 Angular7 中 Datatable 的使用，包括如何创建、配置和使用 Datatable，以及如何实现一些常见的功能。希望本文能对大家学习和使用 Angular7 中的 Datatable 有所帮助。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/65095db595b1f8cacd41871f