bixi/packages/core/table/demo/advance-list.md

企业级中后台前端解决方案

---
title:
  zh-CN: 直接使用 IBixiPagination
  en-US: 直接使用 IBixiPagination
order: 150
---

## zh-CN

在某些情况下 bixi-table 无法满足你的需求，但是你又有分页的需求，此时你可以弃用 bixi-table 选择直接继承自 `BixiPaginationListBase`，那么这种方法也可以大量减少你的代码。

## en-US

在某些情况下 bixi-table 无法满足你的需求，但是你又有分页的需求，此时你可以弃用 bixi-table 选择直接继承自 `BixiPaginationListBase`，那么这种方法也可以大量减少你的代码。


```ts
import { Component } from '@angular/core';
import { BixiPaginationListBase } from '@bixi/core/table';

const MOCK_DATA  = ((new Array(100)).fill('') as any)
  .map((v: string, i: number) => {
    return {
      index: i,
      name: `数据_${i}${v}`
    };
  });

@Component({
  selector: 'bixi-pagination-list-base-demo',
  template: `
    <nz-table
      #basicTable
      [nzData]="items"
      [nzLoading]="loading"
      [nzFrontPagination]="false"
      [nzShowPagination]="true"
      [(nzTotal)]="pagination.total"
      (nzPageIndexChange)="onPageChange($event)"
      [(nzPageSize)]="pagination.pageSize"
      [(nzPageIndex)]="pagination.page">
      <thead>
        <tr>
          <th>序号</th>
          <th>名字</th>
        </tr>
      </thead>
      <tbody>
        <tr *ngFor="let data of basicTable.data">
          <td>{{ data.index + 1 }}</td>
          <td>{{ data.name }}</td>
        </tr>
      </tbody>
    </nz-table>{{pagination | json}}`
})
export class DemoComponent extends BixiPaginationListBase {
  items = [];

  onSearch() {
    console.log('重新搜索', this.pagination);
    this.loading = true;
    setTimeout(() => {
      this.pagination = {
        ...this.pagination,
        total: 20
      };
      const offset = (this.pagination.page - 1) * this.pagination.pageSize;
      const limit = this.pagination.pageSize;
      this.items = MOCK_DATA.slice(offset, offset + limit);
      this.loading = false;
    }, 500)
  }
}
```