基于 Angular 2+ 的分页指令

Angular 2+ 中分页指令是有的，比如 ngx-bootstrap pagination，这里我参考了 angular2-datatable， 加入我们自己的逻辑，自己写分页指令。

HTML 页代码

  

    

      
      
          Search
      
      
          refresh
      
    
  


  

    

      

      
✔
      

        User ID
      
      

        User Name
      
      

        User Phone
      
      

        Modi Time
      
      

        User Address
      
    
  
  

    

      

        {{i}}
      
      

        
      
      
{{item['ghu_uid']}}
      
{{item['ghu_usrname']}}
      
{{item['ghu_usrphone']}}
      
{{item['ghu_birthdate']}}
      
{{item['ghu_usraddr']}}
    
  
  

    

      

        
      
    
  

解释一下，表格上方有一个搜索框，一个搜索按钮，一个刷新按钮，下来就是表格，再下来就是分页。

table 的输入以下：

变量	含义
rdDataSrc	数据来源，可以是一个URL
rdIsInc	是否是增量查询
rdFilterQuery	搜索的VALUE
rdPagesPrefetch	预取几页数据
rdRowsOnPage	每页几行数据
rdSearchScopes	搜索KEY，是个数组
rdIDCol	数据ID所在的列
rdRefreshBtn	刷新按钮的ID

table 的输出如下：

变量	含义
selectedIds	根据输入的ID，输出checkbox选中的行的ID
selectedRows	输出checkbox选中的行的数据

以下直接贴代码了

import {
  Directive, Input, EventEmitter, SimpleChange, OnChanges, DoCheck, IterableDiffers,
  IterableDiffer, Output, OnInit, HostListener, ElementRef
} from '@angular/core';
import * as _ from 'lodash';
import { RequsetStructure } from '../../../models/submit.entities';
import { SubmitService } from '../../../providers/submit.service';
import { ElectronService } from '../../../providers/electron.service';

export interface PageEvent {
  activePage: number;
  rowsOnPage: number;
  dataLength: number;
}

export interface DataEvent {
  length: number;
}

@Directive({
  // tslint:disable-next-line:directive-selector
  selector: 'table[rdDataSrc]',
  exportAs: 'rdDataTable'
})
export class DataTableDirective implements OnChanges, DoCheck, OnInit {

  private diff: IterableDiffer;
  private inputData: Array = [];
  /* tslint:disable */
  @Input('rdDataSrc') public dataSrc: string;
  @Input('rdIsInc') public isInc = false;
  @Input('rdFilterQuery') public filterQuery: string;
  @Input('rdSearchScopes') public searchScopes: Array = [];
  @Input('rdIDCol') public idCol: number;
  @Input('rdPagesPrefetch') public pagesPrefetch: number;
  @Input('rdRefreshBtn') public reFreshBtn: string;

  @Input('rdRowsOnPage') public rowsOnPage = 1000;
  @Input('rdActivePage') public activePage = 1;
  /* tslint:enable */
  @Output() selectedIds: EventEmitter> = new EventEmitter;
  @Output() selectedRows: EventEmitter> = new EventEmitter;

  private mustRecalculateData = false;
  public data: any[];
  public onPageChange = new EventEmitter();
  public inputDataLength = 0;
  private getPageData = null;
  private readonly _selectedIds: Set;
  private readonly _selectedRows: Set