Adding page numbers and making range, limit and input optional

Author: Faisal Iqbal

src/components/pagination.component.ts

@@ -1,4 +1,4 @@
-import { Component, Inject, forwardRef } from '@angular/core';
+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";
@@ -12,6 +12,11 @@ import { PAGINATION_STYLE } from "./pagination.style";
 })
 export class DataTablePagination {
 
+    @Input() show_range = false;
+    @Input() show_limit = false;
+    @Input() show_input = false;
+    @Input() show_numbers = true;
+
     constructor(@Inject(forwardRef(() => DataTable)) public dataTable: DataTable) {}
 
     pageBack() {
@@ -49,4 +54,14 @@ export class DataTablePagination {
     set page(value) {
         this.dataTable.page = Number(<any>value);
     }
+
+    createPageRange(number): any[] {
+        let items: number[] = [];
+        if (number > 1) {
+            for (let i = 1; i <= number; 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,11 @@ export const PAGINATION_TEMPLATE = `
                     </div>
                 </div>
             </div>
+            <button *ngIf="show_numbers"
+                *ngFor="let i of createPageRange(dataTable.lastPage)"
+                [disabled]="i == page"
+                (click)="page = i"
+                class="btn btn-default">{{ i }}</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>
 `;