(OK) Table component with sorting and pagination for Angular2

最新推荐文章于 2020-03-12 10:42:28 发布

转载最新推荐文章于 2020-03-12 10:42:28 发布 · 1.4k 阅读

OK 同时被 3 个专栏收录

393 篇文章

订阅专栏

Web技术/服务计算

197 篇文章

订阅专栏

Kotlin/Java/JavaScript

105 篇文章

订阅专栏

本文介绍了一个针对 Angular2 的数据表格组件的使用方法，包括安装步骤、基本配置及如何利用该组件实现数据展示、排序与分页等功能。

https://www.npmjs.com/package/angular2-datatable

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

  
   <table class="table table-striped" [mfData]="data" #mf="mfDataTable" [mfRowsOnPage]="5">
  
  
       <thead>
  
  
       <tr>
  
  
           <th style="width: 20%">
  
  
               <mfDefaultSorter by="name">Name</mfDefaultSorter>
  
  
           </th>
  
  
           <th style="width: 50%">
  
  
               <mfDefaultSorter by="email">Email</mfDefaultSorter>
  
  
           </th>
  
  
           <th style="width: 10%">
  
  
               <mfDefaultSorter by="age">Age</mfDefaultSorter>
  
  
           </th>
  
  
           <th style="width: 20%">
  
  
               <mfDefaultSorter by="city">City</mfDefaultSorter>
  
  
           </th>
  
  
       </tr>
  
  
       </thead>
  
  
       <tbody>
  
  
       <tr *ngFor="let item of mf.data">
  
  
           <td>{{item.name}}</td>
  
  
           <td>{{item.email}}</td>
  
  
           <td class="text-right">{{item.age}}</td>
  
  
           <td>{{item.city | uppercase}}</td>
  
  
       </tr>
  
  
       </tbody>
  
  
       <tfoot>
  
  
       <tr>
  
  
           <td colspan="4">
  
  
               <mfBootstrapPaginator [rowsOnPageSet]="[5,10,25]"></mfBootstrapPaginator>
  
  
           </td>
  
  
       </tr>
  
  
       </tfoot>
  
  
   </table>

API

`mfData` directive

selector: table[mfData]
exportAs: mfDataTable
inputs
- mfData: any[] - array of data to display on table
- mfRowsOnPage: 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