From fd552d1ea897e2f7afdc2406e79c1df6eab7015f Mon Sep 17 00:00:00 2001
From: Zak Timson <zaktimson@gmail.com>
Date: Tue, 21 Aug 2018 10:01:10 -0400
Subject: [PATCH] Added restrictions to paginator (Fixes #9)

---
 .../ng-datatable/src/lib/ng-datatable.component.html | 12 +++++++++++-
 src/app/app.component.html                           |  2 +-
 2 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/projects/ng-datatable/src/lib/ng-datatable.component.html b/projects/ng-datatable/src/lib/ng-datatable.component.html
index 0048cd8..27f1011 100644
--- a/projects/ng-datatable/src/lib/ng-datatable.component.html
+++ b/projects/ng-datatable/src/lib/ng-datatable.component.html
@@ -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>
diff --git a/src/app/app.component.html b/src/app/app.component.html
index 58b7ea0..0eda48c 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -13,7 +13,7 @@ Checkbox
 <input placeholder="Search" (keyup)="search.next($event.target.value)">
 <br> Selected: {{table.selectedRows.size}}/{{table.processedData.length}}
 <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">
     Hello {{object.firstName}} {{object.lastName}}, How are you today?
     <span *ngIf="object.age < 18">I can see that you are under age.</span>