# Datagrid 分页设置

- **pagination**：`boolean` 显示分页条
- **pageSize**：每页记录数, 默认： 20
- **showPageList**：`boolean` 显示每页记录数列表
- **pageList**：每页记录列表设置 如： [100, 200, 400, 500, 1000]

---

- `pageChanged`: 页码变化事件
- `pageSizeChanged`: 分页大小变化事件

```html
<farris-datagrid
    [columns]="columns" [data]="items" [showBorder]="true"
    [showLineNumber]="true" [fit]="true"
    [striped]="true"

    [pagination]="true" [pageSize]="20" [showPageList]="showPageList"
    (pageChanged)="onPageChanged($event)" (pageSizeChanged)="onPageSizeChanged($event)">
</farris-datagrid>
```

页码change及每页记录数变化后处理参见 `demo-data.service.ts` 。


# Component
```javascript
import { Component, OnInit} from '@angular/core';

import { DATAGRID_REST_SERVICEE, CalculationType } from '@farris/ui-datagrid';
import { DemoDataService } from '../../demo-data.service';
import { DemoDataSeed } from '../../demo-data-seed';

@Component({
    selector: 'demo-datagrid-pager',
    templateUrl: './demo-pagination.component.html',
    providers: [
        {provide: DATAGRID_REST_SERVICEE, useClass: DemoDataService}
    ]
})
export class DemoPaginationComponent implements OnInit {
    columns = [];
    items;
    total = 0;
    pageSize = 100;

    showPageList = false;

    constructor() { }

    ngOnInit(): void {

        const enumData = DemoDataSeed.enumData();
        const enumOpts = { valueField: 'value', textField: 'label', data: enumData };

        this.columns = [
            { field: 'id', width: 100, title: 'ID', footer: {
                options: { text: '合计'},
                formatter: (v, d, i) => {
                    return `<b>${v}</b>`;
                }
            }},
            { field: 'name', width: 130, title: '姓名'},
            { field: 'sex', width: 70, title: '性别' },
            { field: 'birthday', width: 120, title: '出生日期'},
            { field: 'maray', width: 70, title: '婚否', formatter: { type: 'boolean', options: { trueText: '已婚', falseText: '未婚' }}},
            { field: 'addr', width: 170, title: '地址' },
            { field: 'company', width: 100, title: '公司'},
            { field: 'nianxin', width: 70, title: '年薪', footer: {
                options: { calculationType: CalculationType.sum},
                formatter: { type: 'number', options: { prefix: '￥', suffix: '元', precision: 2 }}
            }},
            { field: 'zhiwei', width: 100, title: '职位', formatter: {type: 'enum', options: enumOpts} }
        ];

    }

    onPageSizeChanged($event) {
        console.log('PageSize Changed:', $event);
    }

    onPageChanged($event) {
        console.log('PageNumber Changed:', $event);
    }
}

```