Merge pull request #2 from faisal-iqbal/master

Seperate page number links in pagination

Author: MIt9

README.md

@@ -17,6 +17,8 @@ The templates use bootstrap CSS class names, so the component requires a bootstr
 
 Check out the [demo](https://ggmod.github.io/angular-2-data-table-demo) and its [code](https://github.com/MIt9/angular-4-data-table-demo) for examples of how to use it. 
 
+Demo for pagination with seperate page numbers will be added soon
+
 ## Installing:
 `npm install angular-4-data-table --save`
 
@@ -35,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,18 +1,24 @@
-import { Component, Inject, forwardRef } 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 {
 
-    constructor(@Inject(forwardRef(() => DataTable)) public dataTable: DataTable) {}
+    @Input() show_range = false;
+    @Input() show_limit = false;
+    @Input() show_input = false;
+    @Input() show_numbers = true;
+
+    constructor(@Inject(forwardRef(() => DataTable)) public dataTable: DataTable) {
+    }
 
     pageBack() {
         this.dataTable.offset -= Math.min(this.dataTable.limit, this.dataTable.offset);
@@ -49,4 +55,44 @@ export class DataTablePagination {
     set page(value) {
         this.dataTable.page = Number(<any>value);
     }
+
+    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) {
+            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);
+            }
+        }
+        return items;
+    }
 }

src/components/pagination.template.ts

@@ -1,6 +1,6 @@
 export const PAGINATION_TEMPLATE = `
 <div class="pagination-box">
-    <div class="pagination-range">
+    <div class="pagination-range" *ngIf="show_range">
         {{dataTable.translations.paginationRange}}:
         <span [textContent]="dataTable.offset + 1"></span>
         -
@@ -9,7 +9,7 @@ export const PAGINATION_TEMPLATE = `
         <span [textContent]="dataTable.itemCount"></span>
     </div>
     <div class="pagination-controllers">
-        <div class="pagination-limit">
+        <div class="pagination-limit" *ngIf="show_limit">
             <div class="input-group">
                 <span class="input-group-addon">{{dataTable.translations.paginationLimit}}:</span>
                 <input #limitInput type="number" class="form-control" min="1" step="1"
@@ -20,7 +20,7 @@ export const PAGINATION_TEMPLATE = `
         <div class=" pagination-pages">
             <button [disabled]="dataTable.offset <= 0" (click)="pageFirst()" class="btn btn-default pagination-firstpage">&laquo;</button>
             <button [disabled]="dataTable.offset <= 0" (click)="pageBack()" class="btn btn-default pagination-prevpage">&lsaquo;</button>
-            <div class="pagination-page">
+            <div class="pagination-page" *ngIf="show_input">
                 <div class="input-group">
                     <input #pageInput type="number" class="form-control" min="1" step="1" max="{{maxPage}}"
                            [ngModel]="page" (blur)="page = pageInput.value"
@@ -31,6 +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,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>

src/components/table.component.ts

@@ -46,6 +46,10 @@ export class DataTable implements DataTableParams, OnInit {
     @Input() headerTitle: string;
     @Input() header = true;
     @Input() pagination = true;
+    @Input() pagination_range = false;
+    @Input() pagination_limit = false;
+    @Input() pagination_input = false;
+    @Input() pagination_numbers = true;
     @Input() indexColumn = true;
     @Input() indexColumnHeader = '';
     @Input() rowColors: RowCallback;

src/components/table.template.ts

@@ -47,6 +47,11 @@ export const TABLE_TEMPLATE = `
         <div class="loading-cover" *ngIf="showReloading && reloading"></div>
     </div>
 
-    <data-table-pagination *ngIf="pagination"></data-table-pagination>
+    <data-table-pagination
+        *ngIf="pagination"
+        [show_range]="pagination_range"
+        [show_limit]="pagination_limit"
+        [show_input]="pagination_input"
+        [show_numbers]="pagination_numbers"></data-table-pagination>
 </div>
 `;