Angular+PrimeNg 分页器给后端传参分页

文章目录

Angular+PrimeNg 分页器给后端传参分页
- 一、导入分页器
- 二、分页器显示
- 三、传输某页请求给后端

一、导入分页器

app.module.ts

import { PaginatorModule } from 'primeng/paginator';@NgModule({imports: [PaginatorModule],})

二、分页器显示

html

后端分页，分页器不要卸载p-table里面，只管传参就完事了

<p-paginator [rows]="pageInfo.pageSize" [totalRecords]="pageInfo.total" (onPageChange)="paginate($event)">

官网解释当前event的值

三、传输某页请求给后端

//分页器paginate(event: any) {// event.first = Index of the first record// event.rows = Number of rows to display in new page// event.page = Index of the new page// event.pageCount = Total number of pagesconsole.log(event.page + 1);//如果页数相同不产生变化if(this.pageInfo.pageNum != event.page+1){this.getAllFundInfo(event.page+1)}}

 //获取所有基金信息getAllFundInfo(page: number) {this.fundInfoService.getAllFundInfo(page).subscribe(data => {// this.datasource = data.data;// console.log(this.datasource);// this.totalRecords = this.datasource.length;this.datasource = data.data.list;this.pageOnInit(data.data);console.log(this.pageInfo);this.code = data.code;this.msg = data.msg;if (this.code < 0)this.messageService.add({ severity: 'error', summary: 'Error', detail: this.msg });this.loadFundInfos();})}

完成前端分页请求给后端

Angular+PrimeNg 分页器给后端传参分页相关推荐

Angular父子组件通过服务传参
今天在使用ngx-translate做多语言的时候遇到了一个问题,需要在登录页面点击按钮,然后调用父组件中的一个方法. 一开始想到了@input和@output,然而由于并不是单纯的父子组件关系,而是 ...
http前后端传参写法
HTTP是常用的B/S架构的前后端交互协议,springboot对http接口的传参有以下几种参数接收方式 @RequestMapping(path = "/test")@Resp ...
前端给后端传参的方式
1.针对get,delete类请求,在浏览器上呈现的参数形式是拼接在URL地址后面.以?开头使用的时候直接 const data = {fileName: 'img0.jpg',fileVersio ...
前后端传参（二）之数组对象
前言 -简单数组请前往:[https://blog.csdn.net/shuai8624/article/details/106026325](https://blog.csdn.net/shuai8 ...
SSM8==纯注解SSM项目：实现单表CRUD、事务、自定义异常和统一异常处理、RESTFUL风格接口、统一返回值格式（状态码、内容、消息）、JSON传参、axios、vue.js、elementUI
环境:IDEA2021+JDK8+MAVEN3.8+TOMCAT7插件前端:axios.vue.js.elementUI 后端:见POM.XML相关依赖,主要有数据库MySQL5.7 ,数据源Dru ...
后端分页+前端分页显示（Angular+Primeng+SpringBoot）
后端实现引入PageHelper插件 <dependency><groupId>com.github.pagehelper</groupId><artifa ...
多条件模糊分页查询（angular+primeng+springboot）
在实现了分页查询后,我原本的项目之前的模糊查询失效,之前是传一个封装好的实体对象给后端,后端通过这个对象查询后返回结果给到前端.由于实现了分页,所以查询得到的结果也需要分页. 有个很关键的问题是分页需 ...
Angular使用@Input和@Output实现父子组件互相传参（类似Vue的props和this.emit）
app.component.html <app-in-out [in]='"传输进入"' (out)="out($event)" ></app ...
几个经常用到的angular路由Router、ActivatedRoute 知识点：嵌套路由、路由跳转、路由传参、路由参数获取
深度玩家可移步Angular - 常见路由任务 1.嵌套路由 const routes: Routes = [{path: 'first',component: FirstComponent,//同步 ...

Angular+PrimeNg 分页器给后端传参分页

Angular+PrimeNg 分页器给后端传参分页

文章目录

一、导入分页器

二、分页器显示

三、传输某页请求给后端

Angular+PrimeNg 分页器给后端传参分页相关推荐

最新文章

热门文章