angular + ng-zorro 表格后台分页及排序功能实现，angular + ng-zorro 表格排序不起作用解决办法

angular + ng-zorro 表格排序不起作用是因为数据是从后端获取的，也是后端分页，所以要自己写排序啦~~~~

举例：HTML

<nz-table #basicTable nzBordered [nzData]="listOfData" [nzTotal]="bottomTable.total"

    [nzPageSize]="bottomTable.pageSize" [nzFrontPagination]="false" [nzPageIndex]="bottomTable.pageNo"

    [nzScroll]="{ x: '1340px', y: '230px' }" class="bottom_table" (nzPageIndexChange)="myChange($event)">

    <thead>

      <tr>

        <th nzWidth="180px">A</th>

        <th nzWidth="100px">B</th>

        <th nzWidth="100px">C</th>

        <th nzWidth="100px">D</th>

        <th nzWidth="100px">E</th>

        <th nzWidth="100px">F</th>

        <th nzWidth="250px"

        [nzSortFn]="true"

        (nzSortOrderChange)="sortChange($event)"

        >G</th>

        <th nzWidth="100px">H</th>

        <th nzWidth="100px">I</th>

        <th nzWidth="110px">J</th>

        <th nzWidth="100px"

        [nzSortFn]="true"

        (nzSortOrderChange)="sortChange1($event)"

        >K</th>

      </tr>

    </thead>

    <tbody>

      <tr *ngFor="let data of basicTable.data" (click)="openAnalysis(data)" class="my_small_tr">

        <td>{{ data.a }}</td>

        <td>{{ data.b }}</td>

        <td>{{ data.c }}</td>

        <td>{{ data.d }}</td>

        <td>{{ data.e }}</td>

        <td>{{ data.f }}</td>

        <td>{{ data.g }}</td>

        <td>{{ data.h }}</td>

        <td>{{ data.i }}</td>

        <td>{{ data.j }}</td>

        <td>{{ data.k }}</td>

      </tr>

    </tbody>

  </nz-table>

TS文件

import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';

import { _HttpClient, ModalHelper } from '@delon/theme';

import { I18NService } from '@core';

import { NzMessageService } from 'ng-zorro-antd/message';

import { myCommonService } from 'src/app/core/net/hr_report/myCommon.service';

import { CommonFunService } from 'src/app/core/net/common_zz/common-fun.service';

import { TossAnalysisComponent } from '../../analysis/analysis.component';

import { NzTableFilterFn, NzTableFilterList, NzTableSortFn, NzTableSortOrder } from 'ng-zorro-antd/table';

const BaseUrl = {

  // path: 'http://10.111.111.111:3000'

}

@Component({

  selector: 'app-report',

  templateUrl: './report.component.html',

  styleUrls: ['./report.component.less']

})

export class ReportComponent implements OnInit {

  @Input()

  public listOfData: any = []

  @Input()

  public form: any = {}

  @Output()

  private outer: EventEmitter<any> = new EventEmitter();

  @Input()

  public record: string = ''

  @Input()

  public bottomTable: any = {}

  constructor(

    public msg: NzMessageService,

    public mlbCom: myCommonService,

    public I18NService: I18NService,

    public http: _HttpClient,

    public commonFun: CommonFunService,

    private modal: ModalHelper,

  ) { }

  ngOnInit(): void {

  }

  sortChange(e) {

    console.log(e)

    this.listOfData = e === 'ascend' ? this.listOfData.sort(

      (a, b) => a.stationId.localeCompare(b.stationId)

    ) : this.listOfData.sort(

      (a, b) => b.stationId.localeCompare(a.stationId)

    )

  }

  sortChange1(e) {

    console.log(e)

    this.listOfData = e === 'ascend' ? this.listOfData.sort(

      (a, b) => a.tossRate - b.tossRate

    ) : this.listOfData.sort(

      (a, b) => b.tossRate - a.tossRate

    )

  }

  myChange(e) {

    // this.bottomTable.pageNo = e

    this.outer.emit(e)

  }

}

巴特西

angular + ng-zorro 表格后台分页及排序功能实现，angular + ng-zorro 表格排序不起作用解决办法

angular + ng-zorro 表格排序不起作用是因为数据是从后端获取的，也是后端分页，所以要自己写排序啦~~~~

举例：HTML

TS文件

最新文章

热门文章