angular6+ ng-zorro 表格及分页详细版

最新推荐文章于 2022-11-22 19:46:41 发布

kksw1121

最新推荐文章于 2022-11-22 19:46:41 发布

阅读量1.1w

点赞数 2

文章标签： ng-zorro zorro分页

本文链接：https://blog.csdn.net/qq_43225030/article/details/86613914

版权

本文详细介绍了在Angular6中使用ng-zorro库创建表格和实现前端分页的步骤与方法，包括nz-table的重要属性如nzBordered、dataSet、nzFrontPagination等，以及分页相关选项如nzPageIndex、nzPageSize和回调函数的使用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

nz-table常用属性方法：

nzBordered 表格是否有边框 dataSet 数据源
[nzFrontPagination] 是否在前端分页，默认true
[nzLoading] 是否显示加载中 [nzTotal]数据总条数
[nzPageIndex] 当前页码，可双向绑定
[nzPageSize] 每页展示多少数据，可双向绑定
[nzShowQuickJumper] 是否可以快速跳转至某页默认false
[nzShowSizeChanger] 是否可以改变 nzPageSize 默认false
[nzPageSize] 每页展示多少数据，可双向绑定
(nzPageIndexChange) 当前页码改版时的回调函数
(nzPageSizeChange) 页数改变时的回调函数


<nz-table #rowSelectionTable
  nzBordered   
  [nzFrontPagination]="false"
  [nzData]="dataSet" 
  [nzLoading]="loading"  
  [nzTotal]="total"
  [(nzPageIndex)]="pageIndex"
  [(nzPageSize)]="pageSize"
  [nzShowQuickJumper]="true" 
  [nzShowSizeChanger]="true"
  (nzPageIndexChange)="changePageIndex($event)"   
  (nzPageSizeChange)="changePageSize($event)">
     <thead>
          <tr>
              <th>编号</th>
              <th>名称</th>
              <th>总数</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;

  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();
  }


}