Angular2-datatable-serverpagination-old 是一个用于Angular2应用的数据表格明细视图组件，支持数据分页和排序，基于Bootstrap 3样式。此教程将介绍此npm包的安装及使用方法。
1. 安装
在项目的根目录下使用npm包管理器安装Angular2-datatable-serverpagination-old包：
npm install angular2-datatable-serverpagination-old --save
2. 导入
在你的 Angular2 应用的主组件中导入DataTableServerPaginationOldModule：
-- -------------------- ---- -------
------ - ---------------------------------- - ---- ------------------------------------------
-----------
------------- -
------------
--
-------- -
--------------
------------
-----------
---------------------------------- ------ --
--
---------- ---
---------- --------------
--
------ ----- --------- - -3. 使用
在 HTML 模板中使用 ngx-data-table 组件：
-- -------------------- ---- ------- --------------- -------------------- ----------- ---------------- ---------------------------- -------------------- -------------- -------------------- ------------------ ------------------------- --------------------------------------- -------------------------------------- -----------------
4. 数据源
在组件中生成一个简单的数据源（server-side data source）：
-- -------------------- ---- -------
--------------- ---------------- -------------------------- -
--------
------ ---------------
----- -
- --- -- ----- ----- ---- -- --
- --- -- ----- ----- ---- -- --
- --- -- ----- ----- ---- -- --
- --- -- ----- ----- ---- -- -
--
----------- -
--------- --- -- ---------
--
--
-------------
-5. 参数
参数 config.columns 是本组件的重点。它需要一个数组，数组中的每个对象代表一列数据，对象中包含以下属性：
name: 列名prop: 对应数据源中的列名sortable: 是否可以排序filterable: 是否可以过滤
在组件中，将 config.columns 赋值即可开始展示数据。示例：
this._config = {
showCheckboxColumn: true,
columns: [
{ prop: 'id', name: '编号', sortable: true },
{ prop: 'name', name: '名称', sortable: true },
{ prop: 'age', name: '年龄', sortable: true }
]
};6. 分页
数据源返回一个 rowCount 属性，代表数据总行数。本组件内部根据 rowCount 属性自动计算分页信息。
可以自定义每页默认展示的行数，比如每页展示 10 行数据：
rowsOnPageOptions = [10, 20, 30];
本组件提供了一个事件 onPageChange，用于分页请求数据。示例代码：
onPageChange(event: IPageChangeEvent) {
this.pagination.pageIndex = event.pageIndex;
this.pagination.pageSize = event.pageSize;
this._getData();
}结语
Angular2-datatable-serverpagination-old 包是一个功能强大的数据表格明细视图组件，可以大大提高项目开发效率。希望本文可以帮到大家，谢谢！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005531481e8991b448d06e4