Angular4 自制分页控件
过年后第一波,自制的分页控件,可能功能没有 PrimeNG 那么好,但是基本可以实现自定义翻页功能,包括:首页/最后一页/上一页/下一页。
用户可以自定义:
1. 当前默认页码(如未提供,默认为第一页)
2. 最大显示几个页码(如未提供,默认为5)
3. 每页显示几条数据 (如未提供,默认为5)
HTML:
<ul class="pageUi clear">
<li (click)="changePage('first')" class="fa fa-angle-double-left" [ngClass]="{'disable': pageValidation.isFirst}"></li>
<li (click)="changePage('pre')" class="fa fa-angle-left" [ngClass]="{'disable': pageValidation.isFirst}"></li>
<li (click)="changePage(page)" *ngFor="let page of pageArr" [ngClass]="{'active': page == currentPage}">{{page + 1}}</li>
<li (click)="changePage('next')" class="fa fa-angle-right" [ngClass]="{'disable': pageValidation.isLast}"></li>
<li (click)="changePage('last')" class="fa fa-angle-double-right" [ngClass]="{'disable': pageValidation.isLast}"></li>
</ul>
CSS:
ul.pageUi {
display: flex;
justify-content: center;
}
ul.pageUi li {
list-style-type: none;
float: left;
display: flex;
align-items: center;
justify-content: center;
width: 50px;
height: 50px;
border: solid 1px #ececec;
border-width: 1px 1px 1px 0;
}
ul.pageUi li:first-child {
border-left-width: 1px;
border-radius: 5px 0 0 5px;
}
ul.pageUi li:last-child {
border-radius: 0 5px 5px 0;
}
ul.pageUi li:hover {
background-color: #ececec;
cursor: pointer;
}
ul.pageUi li.active {
color: blueviolet;
font-weight: bold;
}
ul.pageUi li.disable {
color: #ccc;
background-color: #efefef;
}
ul.pageUi li.disable:hover {
background-color: none;
line-height: 50px;
}
TS:
import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core'; @Component({
selector: 'paginator',
templateUrl: './paginator.component.html',
styleUrls: ['./paginator.component.css']
}) export class PaginatorComponent implements OnInit{
@Input() totalRecords: number;
@Input() rows: number = 5;
@Input() currentPage: number;
@Input() pageLinkSize: number;
@Output() onPageChange = new EventEmitter();
private pageCount: number;
private pageArr: Array<number> = [];
private pageValidation: any = { isFirst: false, isLast: false }; constructor(){} ngOnInit(){
this.initDefaultValue();
this.getPageCount();
this.getVisiblePageArr();
this.validateIfFirstLast();
} initDefaultValue(){
this.rows = this.rows ? this.rows : 5;
this.pageLinkSize = this.pageLinkSize ? this.pageLinkSize : 5;
this.currentPage = this.currentPage ? this.currentPage : 0;
} getPageCount(){
this.pageCount = Math.ceil(this.totalRecords/this.rows);
} changePage(actionKey: string){
this.getCurrentPage(actionKey);
this.getVisiblePageArr();
let data = {
first: this.currentPage * this.rows,
rows: this.rows,
page: this.currentPage,
pageCount: this.pageCount
}
this.onPageChange.emit(data);
} getVisiblePageArr(){
this.pageArr = [];
let visiblePage = Math.min(this.pageLinkSize, this.pageCount);
let start = Math.max(0, Math.ceil(this.currentPage - visiblePage / 2));
// When page next to the end
if(this.currentPage >= Math.floor(this.pageCount - visiblePage / 2) ) {
start = Math.max(0, this.pageCount - this.pageLinkSize);
}
let end = start + visiblePage - 1; for (var i = start; i <= end; i++) {
this.pageArr.push(i);
}
} getCurrentPage(actionKey: string){
if(actionKey == 'first') {
this.currentPage = 0;
} else if(actionKey == 'last'){
this.currentPage = this.pageCount - 1;
} else if(actionKey == 'pre') {
if(this.currentPage <= 0) {
return;
}
this.currentPage = this.currentPage - 1;
} else if(actionKey == 'next') {
if(this.currentPage >= this.pageCount - 1){
return;
}
this.currentPage = this.currentPage + 1;
} else {
this.currentPage = Number(actionKey);
} this.validateIfFirstLast();
} validateIfFirstLast(){
if(this.currentPage == 0) {
this.pageValidation = { isFirst: true, isLast: false};
} else if(this.currentPage == this.pageCount - 1) {
this.pageValidation = { isFirst: false, isLast: true};
} else {
this.pageValidation = { isFirst: false, isLast: false};
}
} }
Angular4 自制分页控件的更多相关文章
- [转]Angular4 自制分页控件
本文转自:https://blog.csdn.net/Junyuan_123/article/details/79486276 过年后第一波,自制的分页控件,可能功能没有 PrimeNG 那么好,但是 ...
- 在DevExpress程序中使用Winform分页控件直接录入数据并保存
一般情况下,我们都倾向于使用一个组织比较好的独立界面来录入或者展示相关的数据,这样处理比较规范,也方便显示比较复杂的数据.不过在一些情况下,我们也可能需要直接在GridView表格上直接录入或者修改数 ...
- asp.net webform 自定义分页控件
做web开发一直用到分页控件,自己也动手实现了个,使用用户自定义控件. 翻页后数据加载使用委托,将具体实现放在在使用分页控件的页面进行注册. 有图有真相,给个直观的认识: 自定义分页控件前台代码: & ...
- asp.net分页控件
一.说明 AspNetPager.dll这个分页控件主要用于asp.net webform网站,现将整理代码如下 二.代码 1.首先在测试页面Default.aspx页面添加引用 <%@ Reg ...
- 仿淘宝分页按钮效果简单美观易使用的JS分页控件
分页按钮思想: 1.少于9页,全部显示 2.大于9页,1.2页显示,中间页码当前页为中心,前后各留两个页码 附件中有完整例子的压缩包下载.已更新到最新版本 先看效果图: 01输入框焦点效果 ...
- winform快速开发平台 -> 基础组件之分页控件
一个项目控件主要由及部分的常用组件,当然本次介绍的是通用分页控件. 处理思想:我们在处理分页过程中主要是针对数据库操作. 一般情况主要是传递一些开始位置,当前页数,和数据总页数以及相关关联的业务逻辑. ...
- 基于存储过程的MVC开源分页控件--LYB.NET.SPPager
摘要 现在基于ASP.NET MVC的分页控件我想大家都不陌生了,百度一下一大箩筐.其中有不少精品,陕北吴旗娃杨涛大哥做的分页控件MVCPager(http://www.webdiyer.com/)算 ...
- AspNetPager分页控件配置
AspNetPager是asp.net中常用的分页控件,下载AspNetPager.dll,添加引用,在工具栏就可以看到AspNetPager控件: 拖过来之后,设置如下属性: <webdiye ...
- 自定义angularjs分页控件
继昨天写了knockoutjs+ jquery pagination+asp.net web Api 实现无刷新列表页 ,正好最近刚学习angularjs ,故琢磨着写一个angularjs版本的分页 ...
随机推荐
- No value specified for 'Date'错误
今天使用 BeanUtils.copyProperties(m,n); 遇到 No value specified for 'Date' 这个错误,以前用的时候都不需要加 try 今天使用发现需 ...
- 数据预处理(Python scikit-learn)
在机器学习任务中,经常会对数据进行预处理.如尺度变换,标准化,二值化,正规化.至于采用哪种方法更有效,则与数据分布和采用算法有关.不同算法对数据的假设不同,可能需要不同的变换,而且有时无需进行变换,也 ...
- mssql修改id
alter table image alter column id int IDENTITY (1, 1) NOT NULL 我只能上查询分析器,所以只 ...
- Android SDK和ADT无法更新的解决办法
重要的东西要标红: 经过另外一台电脑测试,按照第二步设置好hosts后,可以一并解决 SDK 和 ADT的更新,无需单独设置SDK Manager. 这里还是写出如何设置SDK Manager以作记录 ...
- Mysql学习---索引的学习 180101
索引:约束 + 快速查找 索引是数据库中用于帮助用户快速查询数据的一种数据结构.类似于字典中的目录,查找字典内容时可以根据目录查找到数据的存放位置,然后直接获取即可. 问:为什么索引可以这么快?[类似 ...
- MapReduce Design Patterns(chapter 2 (part 3))(四)
Inverted Index Summarizations Pattern Description 反向索引模式在MapReduce分析中经常作为一个例子.我们将会讨论我们要创建的term跟标识符之间 ...
- 78、WebClient实现上传下载 System.Net、System.Uri类
高层类.使用简单.均支持异步版本.支持http,https,fpt,files等URI. 一.下载 方法: Stream= client.OpenRead(serverUri): 打开一个可读的流.对 ...
- 编程题A+B Format的总结(第二次作业<一>)
Github链接地址:https://github.com/Startup-try/object-oriented 这个题目现在想想没有那么难,其实还挺简单的,但是中午花了好长的时间还不懂得怎么做,感 ...
- 008单例、继承、final
内容:单例,类继承,final #################################################################################### ...
- js判断鼠标滚轴方向(向上或向下)
var num=1; $(document).on("mousewheel DOMMouseScroll", function (e) { var delta = (e.origi ...