Angular 7+boostrap 分页
作者：互联网
参数定义
taskLists: any；//initData
taskPageList: any; // paginationData
pageNo = 1; // first page
preShow = false;
nextShow = false;
pageSize = 12; // every page count
curPage = 1; //currentPage
pageCount: any ;
代码：
ngOnInit(){
this.pageCount = [1];//这个是为了进这个页面的时候默认有1页
}
getPageList() {//主要的分页代码，页码一共10个
if (this.taskLists.length >= 1) {
if (this.taskLists.length % this.pageSize === 0) {
this.pageNo = Math.floor(this.taskLists.length / this.pageSize);
} else {
this.pageNo = Math.floor(this.taskLists.length / this.pageSize) + 1;
}
if (this.pageNo < this.curPage) {
this.curPage = this.curPage - 1;
}
if (this.pageNo === 1 || this.curPage === this.pageNo) {
this.preShow = this.curPage !== 1;
this.nextShow = false;
} else {
this.preShow = this.curPage !== 1;
this.nextShow = true;
}
} else {
this.taskLists.length = 0;
this.pageNo = 1;
this.curPage = 1;
}
// console.log(this.pageNo);
this.taskPageList = this.taskLists.slice((this.curPage - 1) * this.pageSize, (this.curPage) * this.pageSize);
let begin; // first page
let end; // last page
begin = this.curPage - 5;
if (begin < 1) {
begin = 1;
}
end = begin + 9;
if (end > this.pageNo) {
end = this.pageNo;
}
begin = end - 9;
if (begin < 1) {
begin = 1;
}
this.pageCount = [];
for (var i = begin; i <= end; i++) {
this.pageCount.push(i);
}
}
// Previous page
showPrePage() {
this.curPage--;
if (this.curPage >= 1) {
this.getPageList();
} else {
this.curPage = 1;
}
}
// next page
showNextPage() {
this.curPage++;
if (this.curPage <= this.pageNo) {
this.getPageList();
} else {
this.curPage = this.pageNo;
}
}
onChangePage(value: any) { //点击页码跳到对应页
this.curPage = value;
this.getPageList();
}
最终效果就是这样的不过我是显示10个页码。
标签：begin,boostrap,pageNo,page,curPage,pageSize,taskLists,Angular,分页 来源： https://blog.csdn.net/zhangmin29/article/details/100559467