代码之家  ›  专栏  ›  技术社区  ›  Bhrungarajni

如何在使用angular2的p表中使用lazyload+pagination+sort+filter

  •  1
  • Bhrungarajni  · 技术社区  · 7 年前

    项目得到相应的加载,例如,我有3页的数据,所以总共30我。 如果我去排序或过滤数据,那么它不会显示3页,而是只显示我试图排序的那一页数据。其余2页不显示。在分页中,我得到1,而不是1,2,3。

    HTML格式:

    <p-table [columns]="tableHeaders" [value]="listEmrAllergy " [paginator]="true" [rows]="10" (onLazyLoad)="loadLazy($event)"
        [totalRecords]="totalcount" [lazy]="!press" #tt [globalFilterFields]="tableHeaders">
        <ng-template pTemplate="caption">
          <div style="text-align: right">
            <label>Search:</label>
            <input type="text" pInputText size="25" (keypress)="press=true" [ngModel]="alpha" (ngModelChange)="searchCheck($event)" class="filter"
              style="width:auto" (input)="tt.filterGlobal($event.target.value, 'contains')" autocomplete='off'>
          </div>
        </ng-template>
        <ng-template pTemplate="header" let-columns>
            <tr>
                <th *ngFor="let col of columns" [pSortableColumn]="col.field">
                    {{col.header}}
                    <p-sortIcon [field]="col.field" ariaLabel="Activate to sort" ariaLabelDesc="Activate to sort in descending order" ariaLabelAsc="Activate to sort in ascending order">sooort</p-sortIcon>
                </th>
            </tr>
        </ng-template>
        <ng-template pTemplate="body" let-rowData let-columns="columns">
            <tr>
                <td *ngFor="let col of columns">
                    {{rowData[col.field]}}
                </td>
            </tr>
        </ng-template>
    </p-table>
    

    TS码:

        public searchCheck(evt) {
            evt.length > 0 ? this.press = true :
              setTimeout(() => {
                this.press = false
              }, 400);
          }
    
          public loadLazy(LazyLoadEvent) {
            console.log(LazyLoadEvent);
            const count = (LazyLoadEvent.first + 10) / 10;
            this.pageNo = Math.ceil(count);
            if (LazyLoadEvent.sortField) {
              this.sort(LazyLoadEvent.sortField, LazyLoadEvent.sortOrder);
            }
            else {
              this.interactionHistories;
            }
          }
    
    
          private sort(fieldName: string, order: number) {
            this.listEmrAllergy.sort((row1, row2) => {
              const val1 = row1[fieldName];
              const val2 = row2[fieldName];
              if (val1 === val2) {
                return 0;
              }
              let result = -1;
              if (val1 > val2) {
                result = 1;
              }
              if (order < 0) {
                result = -result;
              }
              return result;
            });
          }
    
     private getEmrAllergyList() {
    let params = { 'Id': this.userId, PageNo: this.pageNo, PageSize: 10 }
    this.emrService.getEmrAllergy(params)
      .subscribe(allergyLists => {
        this.listEmrAllergy = allergyLists.Body.Data.Items;
        this.totalcount = allergyLists.Body.Data.TotalItemCount;
        console.log(this.listEmrAllergy);
      })
        this.emrNavigation.getTotalList();
    

    0 回复  |  直到 7 年前
    推荐文章