<div class="paging">
<span class="paging-tool"
><nz-select [(ngModel)]="toolData.pageSize" (ngModelChange)="sizeCheck()">
<nz-option nzValue="5" nzLabel="5条/页"></nz-option>
<nz-option nzValue="10" nzLabel="10条/页"></nz-option>
<nz-option nzValue="20" nzLabel="20条/页"></nz-option>
<nz-option nzValue="30" nzLabel="30条/页"></nz-option>
</nz-select>
</span>
<nav aria-label="Page navigation search">
<ul class="pagination">
<li class="page-item {{ data.status }}" *ngFor="let data of pagingData">
<a
class="page-link"
[routerLink]="['/article']"
[queryParams]="{ page: data.num }"
queryParamsHandling="merge"
>{{ data.text }}</a
>
</li>
</ul>
</nav>
<span class="ml-2 paging-tool">共{{ toolData.totalPage }}页</span>
<span class="paging-tool"
>去第<input
type="number"
onmousewheel="return false"
[(ngModel)]="toolData.toWitchPage"
(change)="pageCheck()"
/>页</span
>
<button
class="btn btn-outline-primary btn-sm paging-tool"
(click)="pageConfirm()"
>
确定
</button>
</div>
import { Component, OnInit, Input, SimpleChanges } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
@Component({
selector: 'app-article-paging',
templateUrl: './article-paging.component.html',
styleUrls: ['./article-paging.component.less']
})
export class ArticlePagingComponent implements OnInit {
@Input() pageSize: number;
@Input() pageTotal: number;
// 生成分页器的数据
public pagingData: Array<object>;
// 自定义分页数据
public toolData: any = {
'totalPage': '',
'pageSize': '',
'toWitchPage': '1'
}
constructor(
private route: ActivatedRoute,
private Router: Router
) { }
ngOnChanges(changes: SimpleChanges): void {
this.calParams();
console.log(this.toolData.pageSize)
}
ngOnInit(): void {
}
// 通过url获取参数 并计算分页逻辑所需要的参数
calParams() {
this.route.queryParams.subscribe(params => {
// 当前页面参数
let currentPage: number = !params.page ? 1 : params.page;
// 计算总页数
this.toolData.totalPage = Math.ceil(this.pageTotal / this.pageSize);
// 每页列表数
this.toolData.pageSize = !params.size ? '10' : (params.size + '');
// 计算分页
this.PageAlgorithm(currentPage, this.toolData.totalPage, 5);
})
}
// 分页逻辑 返回数组 通过数据绑定
PageAlgorithm(currentPage: number, totalPage: number, showPage: number) {
let data: Array<object> = [];
// 展示页数的一半
let half: number = Math.ceil((showPage - 1) / 2);
//首页和上一页
if (currentPage == 1) {
data.push({ 'text': '首页', 'num': '', 'status': 'disabled' });
data.push({ 'text': '上一页', 'num': '', 'status': 'disabled' });
} else {
data.push({ 'text': '首页', 'num': '1', 'status': '' })
data.push({ 'text': '上一页', 'num': (currentPage - 1), 'status': '' })
}
// 判断分页类型
if (totalPage > 5) {
// 满足显示左省略时状态
if (currentPage - half > 1) {
// 左省略
data.push({ "text": "···", "num": "", "status": "disabled" });
// 满足右省略号状态
if (currentPage * 1 + half * 1 + 1 < totalPage) {
for (let i = currentPage - half; i <= currentPage * 1 + half; i++) {
if (i == currentPage) {
data.push({ "text": i, "num": i, "status": "active" })
} else {
data.push({ "text": i, "num": i, "status": "" })
}
}
// 右省略号
data.push({ "text": "···", "num": "", "status": "disabled" });
// 不满足显示右省略
} else {
// 显示最后showPage个页数
for (let i = totalPage - 4; i <= totalPage; i++) {
if (i == currentPage) {
data.push({ "text": i, "num": i, "status": "active" })
} else {
data.push({ "text": i, "num": i, "status": "" })
}
}
}
// 不满足显示左省略
} else {
// 显示前showPage个页数
for (let i = 1; i <= 5; i++) {
if (i == currentPage) {
data.push({ "text": i, "num": i, "status": "active" })
} else {
data.push({ "text": i, "num": i, "status": "" })
}
}
// 右省略号
data.push({ "text": "···", "num": "", "status": "disabled" });
}
//总页数小于展示页数 页码全部展示
} else {
for (let i = 1; i <= totalPage; i++) {
if (i == currentPage) {
data.push({ "text": i, "num": i, "status": "active" })
} else {
data.push({ "text": i, "num": i, "status": "" })
}
}
}
//末页和下一页
if (currentPage == totalPage) {
data.push({ 'text': '下一页', 'num': currentPage * 1 + 1, 'status': 'disabled' })
data.push({ 'text': '末页', 'num': 'totalPage', 'status': 'disabled' })
} else {
data.push({ 'text': '下一页', 'num': currentPage * 1 + 1, 'status': '' })
data.push({ 'text': '末页', 'num': totalPage, 'status': '' })
}
this.pagingData = data;
}
// 跳转确认按钮
pageConfirm() {
this.Router.navigate(['/article'], { queryParams: { 'page': this.toolData.toWitchPage }, queryParamsHandling: "merge" });
}
// url传参
sizeCheck() {
this.Router.navigate(['/article'], { queryParams: { 'size': this.toolData.pageSize }, queryParamsHandling: "merge" });
}
// 输入框检测
pageCheck() {
// 预算总页数
let totalPage = Math.ceil(this.pageTotal / this.toolData.pageSize);
if (this.toolData.toWitchPage < 1) {
this.toolData.toWitchPage = 1;
}
if (this.toolData.toWitchPage > totalPage) {
this.toolData.toWitchPage = totalPage;
}
}
}
●登录成功后，前端设置 cookie，比如'isLogin = true'，根据isLogin的值去判断；退出登录时删除 cookieisLogin 或设置 'isLogin = false'。
返回列表
评论