ztimson/ng-datatable
1
0
Fork 0
Code Issues Pull Requests Actions Packages Releases Activity

Added restrictions to paginator (Fixes #9)

Browse Source
This commit is contained in:
Zakary Timson
2018-08-21 10:01:10 -04:00
parent f21e120e00
commit fd552d1ea8
2 changed files with 12 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
projects/ng-datatable/src/lib/ng-datatable.component.html
View File

@ -52,8 +52,18 @@
</table>
<nav *ngIf="paginate" [class]="paginateCssClass + 'ngdt-paginator'" aria-label="Page navigation">
<ul class="pagination">
<li class="page-item ngdt-first" [ngClass]="{'disabled': page <= 1}" (click)="changePage(1)"><a class="page-link">First</a></li>
<li class="page-item ngdt-next" [ngClass]="{'disabled': page <= 1}" (click)="changePage(page - 1)"><a class="page-link">Previous</a></li>
<li *ngFor="let i of pages" class="page-item ngdt-page" [ngClass]="{'active': page == i}"><a class="page-link" (click)="changePage(i)">{{i}}</a></li>
<ng-container *ngFor="let i of pages;">
<li *ngIf="i > page - 3 && i < page + 3" class="page-item ngdt-page" [ngClass]="{'active': page == i}">
<a class="page-link" (click)="changePage(i)">
<span *ngIf="i == page - 2 && i > 1">...</span>
{{i}}
<span *ngIf="i == page + 2 && i != pages.length">...</span>
</a>
</li>
</ng-container>
<li class="page-item ngdt-previous" [ngClass]="{'disabled': page >= pages.length}" (click)="changePage(page + 1)"><a class="page-link">Next</a></li>
<li class="page-item ngdt-last" [ngClass]="{'disabled': page == pages.length}" (click)="changePage(pages.length)"><a class="page-link">Last</a></li>
</ul>
</nav>