Angular 6.x 整合JQuery DataTables表格

小渣渣 · 发表于 2018-10-29 14:54:16

JQuery DataTables非常好用的一个数据列表插件，不用自己写分页排序、过滤等功能，只需要返回指定的json格式，插件就可以帮你显示数据。这款好用的表格显示插件怎么应用到angular项目中呢？

本文就整合了一下Angular+bootstrap+DataTables

DataTables官网：https://datatables.net
angular-datatables：https://l-lin.github.io/angular-datatables/#/welcome
（用于动态Web应用程序的 Angular Structural框架+ 用于复杂HTML表格的 DataTables jQuery插件）

GitHub：https://github.com/l-lin/angular-datatables

首先，我们看下整合后的效果，如下图：

QQ截图20181029142215.jpg

入门安装

要使用角度数据表，您需要安装Node 8.9或更高版本以及NPM 6或更高版本。

该文档仅处理使用angular-cli的项目。实际上，前端生态系统正在以我不能再遵循的速度发展。因此，只有angular-cli项目的教程。如果您设法使其工作，例如，SystemJS项目，请提交拉取请求以改进此文档。谢谢！

Angular-CLI版本7.YZ
我建议使用angular-cli来创建和管理角度项目

我更愿意警告你，演示版本是在7.YZ版本中开发的，而较新版本的Angular-CLI可能需要具有不同的配置。

NPM
在使用NPM获取最新版本之前，您需要安装其依赖项：

登录可见。

我现有项目是Angular 6.x，界面是用的Bootstrap的一款模板，jQuery都已经引用，所以，我自己的项目需要特殊处理一下，

npm只安装：

登录可见。

在datatables官网下载插件包，勾选Bootstrap 4和DataTables，选择下方的Download files即可。网址：https://datatables.net/download/builder?bs4/dt-1.10.18

QQ截图20181029144008.jpg

我们把下载的压缩包解压到“src\assets\plugins\datatables.net”目录下面，目录没有请自行创建！！！

编辑 angular.json文件，在脚本和样式属性中添加依赖项：

登录可见。

主要是添加datatables.css和datatables.js文件到项目。

NgModule配置，导入DataTablesModule应用程序的适当级别。

由于我路由是懒加载方式，我并不是在“app.module.ts”文件导入的，请根据自己的实际情况导入。

登录可见。

如果导入错误，会报错如下：

core.js:1673 ERROR Error: Uncaught (in promise): Error: Template parse errors:
Can't bind to 'dtOptions' since it isn't a known property of 'table'. ("<div class="row">
<div class="col-12">
<table datatable [ERROR ->]

服务端分页

HTML页面（baseinfocompany-list.component.html）：

登录可见。

css代码（一定要添加，而且还要有注意事项）：

登录可见。

baseinfocompany-list.component.scss文件：

登录可见。

styles.scss文件：

登录可见。

Typescript代码（baseinfocompany-list.component.ts）

登录可见。

注意：HttpClientModule在app.module.ts也要添加，如下：

登录可见。