angular6 实现前台分页(纯js,无样式)
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
//假数据
tableList = [
{ name: '123', price: 120, num: 3 },
{ name: '123', price: 120, num: 3 },
{ name: '123', price: 120, num: 3 },
{ name: '123', price: 120, num: 3 },
{ name: '123', price: 120, num: 3 },
{ name: '123', price: 120, num: 3 }
];
tablePageList = []; //分页后前台显示数据
pageNo = 1; //当前页码
preShow = false; //上一页
nextShow = true; //下一页
pageSize = 5; //单页显示数
totalCount = 0; //总页数
pageSizes = [5, 10, 15];
curPage = 1; //当前页
ngOnInit() {
this.getPageList();
}
getPageList() {
if (this.tableList.length >= 1) {
if (this.tableList.length % this.pageSize === 0) {
this.pageNo = Math.floor(this.tableList.length / this.pageSize);
} else {
this.pageNo = Math.floor(this.tableList.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.tableList.length = 0;
this.pageNo = 1;
this.curPage = 1;
}
this.tablePageList = this.tableList.slice((this.curPage - 1) * this.pageSize, (this.curPage) * this.pageSize);
}
//点击上一页方法
showPrePage() {
this.curPage--;
if (this.curPage >= 1) {
this.getPageList();
} else {
this.curPage = 1;
}
}
//点击下一页方法
showNextPage() {
this.curPage++;
if (this.curPage <= this.pageNo) {
this.getPageList();
} else {
this.curPage = this.pageNo;
}
}
//自定义跳页方法
onChangePage(value) {
if (value > this.pageNo) {
confirm('超出最大页数');
} else if (value <= 0) {
this.curPage = 1;
this.getPageList();
} else {
this.curPage = value;
this.getPageList();
}
}
//改变每页显示方法
onChangePageSize(value) {
this.pageSize = value;
this.curPage = 1;
this.getPageList();
}
}
<table border="1">
<thead>
<tr>
<th class="text-center">名称</th>
<th class="text-center">单价</th>
<th class="text-center">数量</th>
<th class="text-center">总价</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let list of tablePageList">
<td>{{list.name}}</td>
<td>{{list.price}}</td>
<td>{{list.num}}</td>
<td>{{list.price*list.num}}</td>
</tr>
</tbody>
</table>
<div>
<button type="button" [disabled]="!preShow" (click)="showPrePage()">上一页</button>
<input type="text" (change)="onChangePage($event.target.value)" placeholder="{{curPage}}" value="{{curPage}}">
<span> / {{pageNo}} 页</span>
<button type="button" [disabled]="!nextShow" (click)="showNextPage()">下一页</button>
<span> 每页显示 : </span>
<select (change)="onChangePageSize($event.target.value)">
<option *ngFor="let pageSize of pageSizes" value="{{pageSize}}">{{pageSize}}</option>
</select>
</div>
<span>共{{tablePageList.length}}条</span>