介绍
@lehphyro/angular2-datatable 是一个 Angular2+ 用的基于 DataTables.net 构建的最强大的可扩展的数据表格库。它提供了丰富的特性，包括排序、过滤、分页、全局搜索等等。 它还支持自定义插件和插件很容易编写。
安装
你可以通过以下命令安装该包：
npm install @lehphyro/angular2-datatable --save
引入
在你的项目中，你需要将 DataTables CSS 和 JavaScript 引入项目中。如果已经安装了该 npm 包，你可以直接在你的 vendor.ts 文件中引入：
import 'datatables.net'; import 'datatables.net-bs4/js/dataTables.bootstrap4'; import 'datatables.net-bs4/css/dataTables.bootstrap4.min.css'; import '@lehphyro/angular2-datatable';
使用
数据table初始化的例子
以下是最简单的数据表格的初始化代码，只有数据数组DataTablesOutput<t>的规定，没有其他配置：
<lp-datatable [data]="data"></lp-datatable>
在你的 TypeScript 代码中，你需要定义数据数组：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ------- - ---- ------------
------ - -------------- - ---- --------------------
------ - ---------------- - ---- -------------------------------
------------
--------- ---------
------------ -----------------------
--
------ ----- ------------ -
------ ----- --------------------------
------------------- --------------- --------------- --
----------------------- -
--------------------------------------
-------------------- -------------------------- -- -
--------- - --------
---
-
-在这个有点复杂的代码例子中， getDataTableData 方法从 ProductService 的服务中获取数据，从而填充不同的 DataTablesOutput 属性。
产品服务中获取产品的代码如下所示：
-- -------------------- ---- -------
------ - ---------- - ---- ----------------
------ - ---------- - ---- -----------------------
------ - ---------- - ---- ------------------
------ - ----------- --- - ---- -----------------
------ - ------------------- -------------------- - ---- -------------------------------
------ - ------- - ---- ------------
-------------
------ ----- -------------- -
------- ----------- ------ - ----------------
------------------- ----- ----------- - -
------------------- ---------------------- ------------------------------ -
------ --------------------------------------------------------------
--------- --------- -- -
------ -
------------- --------------------
---------------- -----------------------
----- ----------------------
--
---
----------------------------
--
-
------- ------------------ -------- - ----- --------------- -
---- ---- -- --- ---------- -- ---- ----- -------
----------------------------- -- -------
------ ------------------------
-
-如你所见，您只需要覆盖 ngOnInit() 方法。 在这个参数中，你也可以设置筛选器或其他高级选项来自定义你的表。
现在，当你启动你的 Angular2+ 应用程序，并访问你的应用程序时，你将看到一个功能完整的datatables表格。 Angular2+ 库允许开发人员使用扩展功能来创建自定义主题、搜索方式和策略，因此可以选择建立自己的新型表格。
希望你能发现本文档有所帮助，丰富你的知识库。如果你有任何问题，请在下面的评论中指出。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066bc7967216659e2444d4