ztimson/ng-datatable
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
Show Stats 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> </table>
<nav *ngIf="paginate" [class]="paginateCssClass + 'ngdt-paginator'" aria-label="Page navigation"> <nav *ngIf="paginate" [class]="paginateCssClass + 'ngdt-paginator'" aria-label="Page navigation">
<ul class="pagination"> <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 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-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> </ul>
</nav> </nav>

2
src/app/app.component.html
View File

@ -13,7 +13,7 @@ Checkbox
<input placeholder="Search" (keyup)="search.next($event.target.value)"> <input placeholder="Search" (keyup)="search.next($event.target.value)">
<br> Selected: {{table.selectedRows.size}}/{{table.processedData.length}} <br> Selected: {{table.selectedRows.size}}/{{table.processedData.length}}
<ng-datatable #table [cssClass]="tableCSS" [columns]="columns" [data]="data" [expandedTemplate]="expandable ? expanded : null" <ng-datatable #table [cssClass]="tableCSS" [columns]="columns" [data]="data" [expandedTemplate]="expandable ? expanded : null"
[showCheckbox]="checkbox" [paginate]="false" [selectionMode]="selectionMode == 'None' ? null : selectionMode" (rowSelected)="log($event)"> [showCheckbox]="checkbox" [paginate]="true" [selectionMode]="selectionMode == 'None' ? null : selectionMode" (rowSelected)="log($event)">
<ng-template #expanded let-object="object"> <ng-template #expanded let-object="object">
Hello {{object.firstName}} {{object.lastName}}, How are you today? Hello {{object.firstName}} {{object.lastName}}, How are you today?
<span *ngIf="object.age < 18">I can see that you are under age.</span> <span *ngIf="object.age < 18">I can see that you are under age.</span>