bixi/packages/core/table/demo/simple-table-search.md

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

---
title:
  zh-CN: 支持分页查询
  en-US: 支持分页查询
order: 110
---

## zh-CN
支持分页查询。您可以对 pagination 做双向绑定，每次 pagination 变化时都会触发一次 search

## en-US
支持分页查询。您可以对 pagination 做双向绑定，每次 pagination 变化时都会触发一次 search

```ts
import { Component } from '@angular/core';
import { ICol, ISearchParams } from '@bixi/core/table'; 

interface IPerson {
  name: string;
  age: number;
}

const persons: IPerson[] = [...Array(100)].fill('').map( (e, i) => ({
  name: `name${e}_${i + 1}`,
  age: i + 1
}));


@Component({
  selector: 'components-table-search',
  template: `
    <bixi-table
      [rows]="rows"
      [cols]="cols"
      [loading]="loading"
      [(pagination)]="pagination"
      (search)="onSearch($event)"
    >
    </bixi-table>
  `
})
export class ComponentsTableSimpleTablePaginationComponent {
  loading = false;
  pagination = {
    page: 1,
    pageSize: 10,
    total: persons.length
  }
  rows = [...persons].slice((this.pagination.page - 1) * this.pagination.pageSize, (this.pagination.page - 1) * this.pagination.pageSize + this.pagination.pageSize);
  cols: ICol[] = [
    {
      name: '姓名',
      key: 'name'
    },
    {
      name: '年龄',
      key: 'age'
    }
  ];

  onSearch(value: ISearchParams) {
    this.loading = true;
    setTimeout(() => {
      this.loading = false;
      this.pagination = Object.assign({}, value.pagination, {total: persons.length}) as any;
      const offset = (this.pagination.page - 1) * this.pagination.pageSize;
      const limit = this.pagination.pageSize;
      this.rows = [...persons].slice(offset, offset + limit);
    }, 1000);
  }
}
```