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

原创 2018年04月17日 18:20:11

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

primefaces4 翻页时更新分页footer,totalRecords的更新

datatable 分页时发现,两个浏览器,其中一个添加数据后,另外那个翻到另一页,表格的内容变了,新增的数据有显示,但是总记录数没有更新,以致总页数不会更新。 找了一天,才找到解决办法。 ...
  • hardwin
  • hardwin
  • 2014-03-04 19:38:01
  • 2976

Mysql和oracle的分页问题

因为之前一直用的oracle,习惯了使用oracle的伪列来进行分页的时候,一般查询分页的数据是这样的:             select * from (select a.*,rownum a...
  • u010214269
  • u010214269
  • 2015-09-06 15:02:05
  • 345

Angular2-PrimeNG 分页模块源码学习

Angular2 PrimeNG源码学习Paginator分页组件GITHUB地址首先分析一下分页功能的需求: 由父组件传入数据总数量,每页显示数量,可自定义初始页 由父组件传入分页按钮个数 有第一...
  • weixin_36333953
  • weixin_36333953
  • 2016-11-11 11:35:20
  • 3574

java分页类Page

package com.h3c.itac.util; import java.util.ArrayList; import java.util.List; @SuppressWarnings("r...
  • qq931399960
  • qq931399960
  • 2015-04-24 16:47:11
  • 5350

ssm分页

//page实体类 package com.bw.util;/** * @author Administrator * 分页信息类 */ public class Page { ...
  • f_d_p
  • f_d_p
  • 2017-06-29 09:14:32
  • 181

oracle使用pagesize命令

使用pagesize命令,可以设置每一页的大小,从而控制每一页显示的数据量。pagesize命令的语法格式 如下: set pagesize n 其中,参数n表示每一页大小的正整数,最大值可以为...
  • qq_20545159
  • qq_20545159
  • 2015-02-20 15:48:21
  • 1260

Yii 分页器Pagesize的设置方法

public function search() { // @todo Please modify the following code to remove attributes that sh...
  • u013718071
  • u013718071
  • 2015-06-27 09:46:39
  • 966

limit "+currentPage* pageSize +" ,"+pageSize

                 int pageSize=15;                if(request.getParameter("currentPage")!=null)      ...
  • dugu666
  • dugu666
  • 2009-08-31 20:00:00
  • 1012

SpringBoot集成MyBatis的分页插件PageHelper

俗话说:好
  • aosica321
  • aosica321
  • 2017-11-15 14:51:28
  • 1278

数据分页模块系列 (二) 完美封装PageModel实现分页模块

先说一下框架分页技术,在我们之前那个高校项目中使用DWZ实现的分页用了自定义标签使用起来也比较方便,除了DWZ很多框架已经给我们做好了分页我们需要做的仅仅是把一些分页参数传给我们的框架,俗话说你用别人...
  • lilongsheng1125
  • lilongsheng1125
  • 2014-04-28 11:54:53
  • 5324
收藏助手
不良信息举报
您举报文章:使用primeNG中的DataTable时前后全分页,pageSize,currentPage
举报原因:
原因补充:

(最多只允许输入30个字)