Merge pull request #1 from khalid-folio3/master

Adding ellipses in page numbers

Author: faisal-iqbal

README.md

@@ -37,6 +37,8 @@ add in .angular-cli.json
 and for prodaction build use
 
 `ng build --prod --aot=false`
- 
+
+ ### Added numerical pagination support with 2 next and previous links 
+  
 #### Licensing
 MIT License

src/components/pagination.component.ts

@@ -1,14 +1,14 @@
-import { Component, Inject, forwardRef, Input } from '@angular/core';
-import { DataTable } from './table.component';
-import { PAGINATION_TEMPLATE } from './pagination.template';
-import { PAGINATION_STYLE } from "./pagination.style";
+import {Component, Inject, forwardRef, Input} from '@angular/core';
+import {DataTable} from './table.component';
+import {PAGINATION_TEMPLATE} from './pagination.template';
+import {PAGINATION_STYLE} from "./pagination.style";
 
 
 @Component({
     moduleId: module.id,
-  selector: 'data-table-pagination',
-  template: PAGINATION_TEMPLATE,
-  styles: [PAGINATION_STYLE]
+    selector: 'data-table-pagination',
+    template: PAGINATION_TEMPLATE,
+    styles: [PAGINATION_STYLE]
 })
 export class DataTablePagination {
 
@@ -17,7 +17,8 @@ export class DataTablePagination {
     @Input() show_input = false;
     @Input() show_numbers = true;
 
-    constructor(@Inject(forwardRef(() => DataTable)) public dataTable: DataTable) {}
+    constructor(@Inject(forwardRef(() => DataTable)) public dataTable: DataTable) {
+    }
 
     pageBack() {
         this.dataTable.offset -= Math.min(this.dataTable.limit, this.dataTable.offset);
@@ -55,10 +56,40 @@ export class DataTablePagination {
         this.dataTable.page = Number(<any>value);
     }
 
-    createPageRange(number): any[] {
+    hasPrevious(number, page) {
+        const difference = this.getDifference();
+        if ((page - difference) > 1) {
+            return true;
+        }
+        return false;
+    }
+
+    hasNext(number, page) {
+        const difference = this.getDifference();
+        if ((number - page) > difference) {
+            return true;
+        }
+        return false;
+    }
+
+    getDifference() {
+        const difference = 2;
+        return difference;
+    }
+
+    createPageRange(number, page): any[] {
         let items: number[] = [];
         if (number > 1) {
-            for (let i = 1; i <= number; i++) {
+            const difference = this.getDifference();
+            let maxPage = number;
+            let minPage = 1;
+            if ((number - page) >= difference) {
+                maxPage = page + difference;
+            }
+            if ((page - difference) >= 1) {
+                minPage = page - difference;
+            }
+            for (let i = minPage; i <= maxPage; i++) {
                 items.push(i);
             }
         }

src/components/pagination.template.ts

@@ -31,12 +31,14 @@ export const PAGINATION_TEMPLATE = `
                     </div>
                 </div>
             </div>
+            <button *ngIf="hasPrevious(maxPage,page)" [disabled]="true" (click)="false" class="btn btn-default hasPrevious">...</button>
             <div class="pagination-page" *ngIf="show_numbers">
-                <button *ngFor="let i of createPageRange(maxPage)"
+                <button *ngFor="let i of createPageRange(maxPage,page)"
                     [disabled]="i == page"
                     (click)="page = i"
                     class="btn btn-default">{{ i }}</button>
             </div>
+            <button *ngIf="hasNext(maxPage,page)" [disabled]="true" (click)="false" class="btn btn-default hasNext">...</button>
             <button [disabled]="(dataTable.offset + dataTable.limit) >= dataTable.itemCount" (click)="pageForward()" class="btn btn-default pagination-nextpage">&rsaquo;</button>
             <button [disabled]="(dataTable.offset + dataTable.limit) >= dataTable.itemCount" (click)="pageLast()" class="btn btn-default pagination-lastpage">&raquo;</button>
         </div>