angular6+ ng-zorro 表格后台分页及排序功能实现

 <nz-table #rowSelectionTable [nzData]="dataSet" nzBordered [nzFrontPagination]="false" [nzLoading]="loading"
 [nzTotal]="total" [(nzPageIndex)]="pageIndex" [(nzPageSize)]="pageSize" (nzPageIndexChange)="changePageIndex($event)"
(nzPageSizeChange)="searchData(true)" [nzShowQuickJumper]="true" [nzShowSizeChanger]="true">
        <thead (nzSortChange)="sort($event)" nzSingleSort>
            <tr>
           <th nzShowSort nzSortKey="id">编号th>
          <th nzShowSort nzSortKey="name">名称th>
          <th nzShowSort nzSortKey="count">总数th>
        tr>
        thead>
        <tbody>
            <tr *ngFor="let data of rowSelectionTable.data">
                <td>{{data.id}}td>
                <td>{{data.name}}td>
                <td>{{data.count}}td>
            tr>
        tbody>
    nz-table>
import { Component, OnInit } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { ViserModule } from 'viser-ng';
import {TableDataService } from './table-data.service';

@Component({
  selector: 'table-data',
  templateUrl: './table-data.component.html'
})

export class TableDataComponent implements OnInit {
  dataSet = [];
  pageIndex = 1;
  pageSize = 10;
  total = 1;
  loading = true;
  sortName = null;
  sortValue = null;

  constructor(private tableDataService : TableDataService) {}

  ngOnInit(): void {
    this.getData();
  }

  getData(): void {
    this.loading = true;
    this.tableDataService.getData(this.pageIndex, this.pageSize ).subscribe((result: any) => {
      this.loading = false;
      this.total = result.data.length;
      this.dataSet = result.data;
      });
    });
  }
  changePageIndex(pageIndex ) {
    this.pageIndex = pageIndex;
    this.getData();
  }
   changePageSize(pageSize) {
    this.pageSize = pageSize;
     this.getData();
  }
  sort(sort: { key: string, value: string }): void {
    this.sortName = sort.key;
    this.sortValue = sort.value;
    this.search();
  }

  search(): void {
    if (this.sortName && this.sortValue) {
      this.dataSet = this.dataSet.sort((a, b) => (this.sortValue === 'ascend') ? (a[this.sortName] > b[this.sortName] ? 1 : -1) : (b[this.sortName] > a[this.sortName] ? 1 : -1));
    } else {
      this.dataSet = this.dataSet;
    }
  }
}

你可能感兴趣的:(angular6+ ng-zorro 表格后台分页及排序功能实现)