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