Angular 自定义分页组件，自定义每页显示个数

后端返回列表是全部数据，分页前端做的，自定义分页组件实现前端分页，下图为分页效果：

1.创建page.component.html

<nav class="navigation"><ul class="pagination"><li [hidden]="pageTotal<11" class="page-item" (click)="goPage(1)"><a class="page-link" href="javascript:void(0);">首页</a></li><li class="page-item"><button type="button" class="page-link" aria-label="Previous" [disabled]="pageNumber===1" (click)="goPage(pageNumber-1)"><span aria-hidden="true">&laquo;</span><span class="sr-only">Previous</span></button></li><li *ngFor = "let item of page(); let i = index" class="page-item" [ngClass]="{'active':pageNumber == item}" (click)="goPage(item)"><a class="page-link" href="javascript:void(0);">{{item==0?'...':item}}</a></li><li class="page-item"><button type="button" class="page-link" aria-label="Next" [disabled]="pageNumber===pageTotal" (click)="goPage(pageNumber+1)"><span aria-hidden="true">&raquo;</span><span class="sr-only">Next</span></button></li><li  [hidden]="pageTotal<11" class="page-item" (click)="goPage(pageTotal)"><a class="page-link" href="javascript:void(0);">尾页</a></li><li class="defined-page-size" [hidden]="isHiddenItemCount">每页显示<input class="text-center" type="number" [value]="pageItemCount" min="1" [max]="[pageData.length]" (input)="pageItemChange($event)">条</li><li class="page-item" (click)="setPageItem()" [hidden]="isHiddenItemCount"><button class="page-link">确定</button></li></ul>
</nav>

2.创建page.component.ts

import { Component, OnInit, Input, EventEmitter, Output } from '@angular/core';@Component({selector: 'app-page',templateUrl: './page.component.html',styleUrls: ["./page.component.css"]
})export class PageComponent implements OnInit {@Input() pageData: any[] = [];//分页的列表数据@Input() pageItemCount: number = 15;//每页显示的个数，默认15，可自定义@Input() pageNumber : number = 1;//页码@Input() isHiddenItemCount:boolean;//是否显示自定义页数@Output() onChangePage: EventEmitter<Number> = new EventEmitter;@Output() onChangePageItemCount : EventEmitter<Number> = new EventEmitter;pageTotal: number = 1;pageSum: number = 10; //navigation total numbercurrentPageItem: number;constructor() {}ngOnInit() {if (this.pageItemCount < 0) {this.pageItemCount = 1;}if (!Array.isArray(this.pageData)) {this.pageData = [];}if(!this.isHiddenItemCount){this.isHiddenItemCount = false;}}page() {//设置分页this.pageTotal = Math.ceil(this.pageData.length / this.pageItemCount);let halfPageSum = Math.floor(this.pageSum >> 1);let pageItems = [];for (let i = 0; i < this.pageTotal; i++) {pageItems[i] = i + 1;}if (this.pageTotal > this.pageSum) {if (this.pageNumber <= halfPageSum) { // LeftpageItems = pageItems.slice(0, this.pageSum);} else if (this.pageNumber > this.pageTotal - halfPageSum) { // RightpageItems = pageItems.slice(this.pageTotal - this.pageSum, this.pageTotal);pageItems[0] = 0;} else { // Middlelet start = this.pageNumber - halfPageSum;pageItems = pageItems.slice(start, start + this.pageSum - 2);pageItems.unshift(0);pageItems.push(0);}}return pageItems;}goPage(pageNumber: number) {//进入某一页if (pageNumber > 0) {this.pageNumber = pageNumber;this.onChangePage.emit(this.pageNumber);}}setPageItem(){//确定this.onChangePageItemCount.emit(this.currentPageItem);}pageItemChange(event){//自定义每页显示数据this.currentPageItem = event.target.value;}
}

3.在列表组件中的使用

html:

<div class="card"
*ngFor="let service of services.slice((pageNumber-1)*pageItemCount,pageItemCount*pageNumber); let
i=index"><div class="card-header" role="tab" id="heading{{i}}"><h5 class="mb-0"><a class="row" routerLink="/web/slt/{{service.serviceId}}"><span class="col-sm-1">#{{i+1+(pageNumber-1)*pageItemCount}}</span><span class="col-sm-3">Service Id: {{service.serviceId}}</span><span class="col-sm-5">{{service.shortServiceName}}</span></a></h5></div></div></div><app-page *ngIf="ssgService.slt.services.length > pageItemCount" [pageItemCount]="pageItemCount"
[pageData]="ssgService.slt.services" [pageNumber]="pageNumber" (onChangePage)="goPage($event)"(onChangePageItemCount)="setPageItem($event)"></app-page>

ts:

import { Component, OnDestroy, OnInit } from "@angular/core";
import { Router, ActivatedRoute } from "@angular/router";export class SLTComponent {pageNumber: number = 1;//默认第一页pageItemCount: number = 15;//每页显示个数，默认15，可自定义constructor(private router: Router,private route: ActivatedRoute) {}ngOnInit(): void {//获取分页参数this.pageNumber = this.route.snapshot.queryParams["pageNumber"]? this.route.snapshot.queryParams["pageNumber"]: 1;this.pageItemCount = this.route.snapshot.queryParams["pageItemCount"]? this.route.snapshot.queryParams["pageItemCount"]: 15;//获取数据列表......}goPage(pageNumber: number) {//进入某一页this.pageNumber = pageNumber;this.router.navigate(["web/slt"], {queryParams: {pageNumber: pageNumber,pageItemCount: this.pageItemCount}}).catch();}setPageItem(pageItemCount: number) {//设置每页显示的个数，查询加载数据this.pageItemCount = pageItemCount;this.pageNumber = 1;this.router.navigate(["web/slt"], {queryParams: { pageNumber: 1, pageItemCount: this.pageItemCount }}).catch();}}

4.css样式就不展示了，欢迎评论交流

Angular 自定义分页组件，自定义每页显示个数相关推荐

Python自定义分页组件
为了防止XSS即跨站脚本攻击,需要加上 safe # 路由 from django.conf.urls import url from django.contrib import admin from ...
mvc jquery ajax分页实例,jQuery Ajax自定义分页组件(jquery.loehpagerv1.0)实例详解，mvcpagerajax分页...
jQuery Ajax自定义分页组件(jquery.loehpagerv1.0)实例详解,mvcpagerajax分页简单的两个步骤即可实现分页功能 //回调里面进行业务处理 function lo ...
vue2自定义分页组件，可设置每页显示数量，指定跳转具体页面
https://blog.csdn.net/yangwei282367751/article/details/82722840 分页组件 <template> <div> ...
ASP.NET技巧：GridView控件自定义分页详解第一页
ASP.NET技巧:GridView控件自定义分页详解日期:2007年9月11日作者: 查看:[大字体中字体小字体] <script src="../gg/info468.js ...
自定义JS组件+调用restfui接口显示（SpringBoot）
先上效果图,可多个显示 , 应用场景:可用于设备稼动率显示(如开机.停机.故障占比多少),中间可写一些文字表达(比如交期紧急情况等等). 1.创建自定义饼图(JS组件) 1 function Bing ...
latex 分页_latex 图片跨页显示问题？？？
latex 中一个页面有很多图片,超出一页就显示不出来了:请问怎么让后续图片显示在一个新页面中? 图片显示代码如下每行显示三张: \begin{figure} \centering \includeg ...
Django 分页组件替换自定义分页
Django的分页器(paginator) 总之不太好用我们还是用自己的好一些自定义分页器分页实现源码 """ 自定义分页组件 """c ...
phpcmsV9 自定义分页函数与调用 - 不影响后台SQL分页
phpcmsV9 自定义分页函数与调用 - 不影响后台SQL分页一.前言: 这里主要有二处需要修改: 文件1. www\phpcms\libs\functions\global.func.php 文 ...
ASP.NET 2.0在SQL Server 2005上自定义分页
这篇文章讲述了如何利用SQL Server 2005的新特性来简单高效的实现分页.对于那些暂时还没用到SQL Server2005的人们,请看在大规模数据中的高效分页方法.如果需要,这篇文章会补上这里 ...

Angular 自定义分页组件，自定义每页显示个数

Angular 自定义分页组件，自定义每页显示个数相关推荐

最新文章

热门文章