使用primeNG中的DataTable时前后全分页,pageSize,currentPage

1.  引入p-dataTable 的module

      import { DataTableModule } from "primeng/primeng";

2. html中写入dataTable,但是分页需要单独写,因为没有触发点击下一页的事件,设置paginator为false

 

<p-dataTable [value]="_positionManagementList" [paginator]="false" [loading]="_loading" scrollHeight="300px" scrollable="true"
selectionMode="single" [responsive]="true" [(selection)]="_selectPosition" (onRowSelect)="_positionSelectHandler($event)" >
<p-header>Responsive</p-header>
<p-column field="id" header="" [style]="{'width':'3%'}"></p-column>
<p-column field="jobGroupId" header="岗位编号" [style]="{'width':'5%'}"></p-column>
<p-column field="jobName" header="岗位名称"></p-column>
<p-column field="jobType" header="所在单位"></p-column>
<p-column field="createTime" header="创建时间" [style]="{'width':'15%'}"></p-column>
<p-column field="status" header="有效" [style]="{'width':'5%'}"></p-column>
<p-column field="note" header="岗位描述" [style]="{'width':'30%'}"></p-column>

</p-dataTable>

3. 单独写分页,onPageChange触发事件会触发返回点击的页数

<p-paginator [rows]="_pageSize" [totalRecords]="_total" (onPageChange)="_paginate($event)" [rowsPerPageOptions]="[5,8,10,12,15]"
[style]="{'padding-top':'20%'}" ></p-paginator>

4、方法的返回结果如下,event.page实际需要加上一个1才是真正的点击页数

  

_paginate(event) {
this._pageSize = event.rows;
this._current = event.page + 1;
this.refreshData()
}

5.具体步骤请参考primeNG官网:https://www.primefaces.org/primeng/#/datatable,

  https://www.primefaces.org/primeng/#/paginator

阅读更多
想对作者说点什么?

博主推荐

换一批

没有更多推荐了,返回首页