(OK) Table component with sorting and pagination for Angular2
来源:互联网 发布:网络机房日常维护项目 编辑:程序博客网 时间:2024/06/05 15:51
https://www.npmjs.com/package/angular2-datatable
Demo
Check live demo in plunker
Installation
npm i -S angular2-datatable
Usage example
AppModule.ts
import {NgModule} from "@angular/core";...import {DataTableModule} from "angular2-datatable"; @NgModule({ imports: [ ... DataTableModule ], ...})export class AppModule { }
AppComponent.html
Name Email Age City {{item.name}} {{item.email}} {{item.age}} {{item.city | uppercase}}
API
mfData
directive
- selector:
table[mfData]
- exportAs:
mfDataTable
- inputs
mfData: any[]
- array of data to display on tablemfRowsOnPage: number
- number of rows should be displayed on page (default: 1000)mfActivePage: number
- page number should be displayed on init (default: 1)
mfDefaultSorter
component
- selector:
mfDefaultSorter
- inputs
by: any
- specify how to sort data (argument for lodash function_.sortBy )
mfBootstrapPaginator
component
Displays buttons for changing current page and number of displayed rows using bootstrap template (css for bootstrap is required). If array length is smaller than current displayed rows on page then it doesn't show button for changing page. If array length is smaller than min value rowsOnPage then it doesn't show any buttons.
- selector:
mfBootstrapPaginator
- inputs
rowsOnPageSet: number
- specify values for buttons to change number of diplayed rows
0 0
- (OK) Table component with sorting and pagination for Angular2
- (OK) angular2-data-table is a Angular2 component for presenting large and complex data.
- Table pagination and Search bar in Angular2
- spring.data.jpa.query :Cannot use native queries with dynamic sorting and/or pagination in method
- UI Components for use with Angular2 and Bootstrap4
- SpringData JPA @Query分页查询 Cannot use native queries with dynamic sorting and/or pagination in method
- Angular2 分页(Pagination)
- Simple Numeric Pagination for DataList and Repeater
- (OK) Problem With Android Configuration - routing table
- Angular2 series – Component, Directive, Pipe and Service
- Client-side table sorting for flexigrid
- Lua中table.sort() 报错 attempt to compare number with nil和invalid order function for sorting
- (OK) Angular 2 CRUD, modals, animations, pagination, datetimepicker and much more
- Angular2核心组件@Component
- Angular2核心组件@Component
- Angular2核心组件@Component
- First Angular2 App with TypeScript and Visual Studio 2013
- Truth table for AND operator
- 洛谷 P2331 [SCOI2005] 最大子矩阵
- U盘启动并读取dx寄存器的值
- 《疯狂Android讲义》学习笔记 -- Fragment详解
- 【模板】最短路算法的优化
- 数据结构和算法------LinkedList的实现
- (OK) Table component with sorting and pagination for Angular2
- 使用Gradle发布aar项目到JCenter仓库
- 《罗马假日》
- Debug Android NDK code
- Bzoj-1303 中位数
- MyBank的全部代码升级版
- iOS开发:使用GCD
- 如何在MarkDown中使用尖括号<>
- 51nod 0-1背包详解dp(加一维优化)