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