前言
在前端开发中，使用表格组件是非常常见的情况。而在 Angular 中，非常常用的表格组件就是 ng2-smart-table 了。不过有时候我们需要在表格中加入分页功能，这时候我们就可以使用另一个 npm 包，那就是本文要介绍的 angular2-datatable-pagination。本文将带领你详细了解这个包的用法，以及如何在你的 Angular 项目中用它实现分页功能。
安装
首先，在你的 Angular 项目中安装 angular2-datatable-pagination，可以通过 npm 命令行安装：
npm install angular2-datatable-pagination --save
引入
引入 angular2-datatable-pagination 是非常容易的，只需要在你的组件文件中添加以下代码：
-- -------------------- ---- -------
------ - ------------------- - ---- --------------------------------
------------
--------- ----------------
------------ -----------------------
---------- -----------------------
--
------ ----- ------------ -
------------------------------- -------------------- --------------------
-注意，对于一个需要分页的表格，必须要有一个用于更新表格的方法，例如：
updateTable(page: number, perPage: number) {
// ...
}使用
首先，我们需要在模板文件中添加分页组件，例如：
<pagination-controls (pageChange)="updateTable($event.page, $event.perPage)"
class="my-pagination"></pagination-controls>其中 pageChange 事件会在分页操作时被触发，我们可以在此方法中调用之前定义的 updateTable 方法来更新表格数据。而 class="my-pagination" 是添加一个自定义的 CSS class，以便我们可以识别它并进行样式定制。
接着，我们需要在表格组件中使用 paginationComponent 对象以获取分页数据，例如：
-- -------------------- ---- -------
---------- -
-- ------
------------------- ---------------------------------------
-- ---------------
----------------------------------------------------- ------- -- -
---------------------- ---------------------------------------
---
-在上面的代码中，我们在组件初始化时获取了第一页的数据，然后监听分页组件的变化并在 pageChange 事件被触发时更新数据，代码看起来非常简洁。
示例代码
下面是一个简单的示例代码，以便你更好地理解 angular2-datatable-pagination 的用法：
-- -------------------- ---- -------
------------ --------- ---------- ---------
---- -------------------------
------ ------------ -------------- ---------------
-------
----
-----------
-----------
-----------
-----
--------
-------
--- ----------- ---- -- -----------
------ ------- -------
------ --------- -------
------ ---------------- -------
-----
--------
--------
------
-------------------- -------------------------------------- ----------------
---------------------------------------------- -------------------- ---- -------
------ - ---------- --------- - ---- ----------------
------ - ------------------- - ---- --------------------------------
------------
--------- ------------
------------ -------------------------
---------- -------------------------
--
------ ----- -------------- -
------------------------------- -------------------- --------------------
---------- --- - ---
------------- - -
---------- -
------------------- ---------------------------------------
----------------------------------------------------- ------- -- -
---------------------- ---------------------------------------
---
-
----------------- ------- -------- ------- -
-- --------
------------- -- -
--- ---- - ---
--- ---- - - ----- - -- - -------- - - ---- - -------- ---- -
-----------
--- - - --
----- --- --- - ----
------------ ----- --- - -- ----
---
-
-------------- - -----
-- -----
-
-总结
到这里，我们就学习了如何使用 angular2-datatable-pagination 包实现分页功能。期望本文能够帮助读者更好地掌握 Angular 开发技术，欢迎大家留下评论或提出意见建议。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005546a81e8991b448d1b23