0
私はページ内にすべてのレコードを表示していますが、ページの下部にページ番号があります。私はページングが多くの管理パネルで再利用されるため、ページングは独立したコンポーネントでなければならないと考えています.Ex：UserManagement、PostManagement、..角度2のコンポーネントを共有する
ページ分割は知っておく必要があるため、特定のテーブルのレコード数。例：UserManagementでは、UserServiceを使用してすべてのレコードをカウントし、テーブルレコードに制限レコードを取得します。 PostManagementでは、私は同じことをする必要があります。
これが今の私のコードです：（表示リストのユーザーへの） users.component.ts
export class UsersComponent implements OnInit {
private users: User[];
private pagination: Pagination;
private limit: number;
private currentPage: number;
private limits:number[] = _.range(10,110,10);
constructor(
private userService: UsersService,
) { }
ngOnInit() {
this.limit = 10;
this.currentPage = 1;
this.pagination = new Pagination(1, this.currentPage, this.limit);
this.changePage(this.currentPage);
}
changePage(page: number) {
if (page < 1 || page > this.pagination.totalPages) {
return;
}
this.currentPage = page;
this.userService.getUsers(this.limit * (this.currentPage - 1), this.limit).subscribe(res => {
this.users = res.rows as User[];
this.pagination = new Pagination(res.count, this.currentPage, this.limit);
});
}
}
users.component.html
<div class="row">
<div class="col-sm-12">
<table class="table table-striped table-bordered table-hover dataTable no-footer dtr-inline" id="dataTables-example" role="grid">
<thead>
<tr role="row">
<th class="sorting_desc" tabindex="0" rowspan="1" colspan="1">Id</th>
<th class="sorting" tabindex="0" rowspan="1" colspan="1">Account</th>
<th class="sorting" tabindex="0" rowspan="1" colspan="1">Password</th>
<th tabindex="0" rowspan="1" colspan="1">Status</th>
<th tabindex="0" rowspan="1" colspan="3">Action</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let user of users;let index=index;let isOdd=odd;let isEven=even" class="gradeA" [class.odd]="isOdd" [class.even]="isEven"
role="row">
<td>{{user.id}}</td>
<td>{{user.username}}</td>
<td>{{user.password}}</td>
<td>{{user.status}}</td>
<td>action</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<div class="dataTables-info" id="dataTables-example_info">Information</div>
</div>
<div class="col-sm-6">
<div class="dataTables_paginate paging_simple_numbers" id="dataTables-example_paginate" *ngIf="pagination.displayPages && pagination.displayPages.length">
<ul class="pagination">
<li class="paginate_button first" [ngClass]="{disabled:pagination.currentPage === 1}">
<a (click)="changePage(1)">First</a>
</li>
<li class="paginate_button previous" [ngClass]="{disabled:pagination.currentPage === 1}">
<a (click)="changePage(pagination.currentPage - 1)">Previous</a>
</li>
<li class="paginate_button previous" *ngFor="let page of pagination.displayPages" [ngClass]="{active:pagination.currentPage === page}">
<a (click)="changePage(page)">{{page}}</a>
</li>
<li class="paginate_button next" [ngClass]="{disabled:pagination.currentPage === pagination.totalPages}">
<a (click)="changePage(pagination.currentPage + 1)">Next</a>
</li>
<li class="paginate_button last" [ngClass]="{disabled:pagination.currentPage === pagination.totalPages}">
<a (click)="changePage(pagination.totalPages)">Last</a>
</li>
</ul>
</div>
</div>
</div>
pagination.ts
export class Pagination {
totalElements: number;
totalPages: number;
currentPage: number;
limit: number;
startPage: number;
endPage: number;
startIndex: number;
endIndex: number;
displayPages: number[];
constructor(totalElements: number, currentPage: number = 1, limit: number = 10) {
this.totalElements = totalElements;
this.limit = limit;
this.currentPage = currentPage;
this.totalPages = Math.ceil(totalElements/limit);
this.startPage = 1;
this.endPage = this.totalPages;
if (this.totalPages > 10) {
if (currentPage <= 6) {
this.endPage = 10;
} else if (currentPage + 4 >= this.totalPages) {
this.startPage = this.totalPages - 9;
} else {
this.startPage = currentPage - 5;
this.endPage = currentPage + 4;
}
}
this.startIndex = (currentPage - 1) * limit;
this.endIndex = Math.min(this.startIndex + limit - 1, totalElements - 1);
this.displayPages = _.range(this.startPage, this.endPage + 1);
}
}