change paging of site table

src/app/dashboard/table/table.component.html

@@ -139,7 +139,7 @@
 
 
 
- <mat-paginator [pageSizeOptions]="[10, 20,40]" showFirstLastButtons></mat-paginator>
+ <mat-paginator [pageSize]="20" [pageSizeOptions]="getPageSizeOptions()" showFirstLastButtons></mat-paginator>
 </div>
 
   </mat-sidenav-content>

src/app/dashboard/table/table.component.ts

@@ -10,6 +10,7 @@ import {SiteShortService} from '../../site-short.service';
 import {SharedService} from '../../shared-service';
 import {Site} from '../../model/site';
 import { AuthService } from 'src/app/auth.service';
+import { DataSource } from '@angular/cdk/table';
 
 
 
@@ -35,6 +36,8 @@ export class TableComponent implements OnInit, DoCheck,AfterViewInit {
   gocdbSiteNames: string[];
   dpmtSiteNames: string[];
   username: string;
+  tableLength: number;
+  defaultPageSizeOptions: number[] =[10,20,40,80];
 
   @ViewChild(MatPaginator) paginator: MatPaginator;
   @ViewChild(MatSort) sort: MatSort;
@@ -67,6 +70,7 @@ export class TableComponent implements OnInit, DoCheck,AfterViewInit {
       this.dataSource = new MatTableDataSource<SiteShort>(this.serverList);
       this.dataSource.paginator = this.paginator;
       this.dataSource.sort = this.sort;
+      this.tableLength=this.dataSource.data.length;
 
     } else {
       
@@ -81,6 +85,7 @@ export class TableComponent implements OnInit, DoCheck,AfterViewInit {
           this.dataSource = new MatTableDataSource<SiteShort>(this.serverList);
           this.dataSource.sort = this.sort;
           this.dataSource.paginator = this.paginator;
+          this.tableLength=this.dataSource.data.length;
           
 
         }
@@ -122,6 +127,7 @@ export class TableComponent implements OnInit, DoCheck,AfterViewInit {
     this.dataSource = new MatTableDataSource<SiteShort>(this.serverList);
     this.dataSource.paginator = this.paginator;
     this.dataSource.sort = this.sort;
+    this.tableLength=this.dataSource.data.length;
   }
 
 
@@ -248,6 +254,7 @@ ngDoCheck() {
       this.dataSource = new MatTableDataSource<SiteShort>(this.serverList);
       this.dataSource.paginator = this.paginator;
       this.dataSource.sort = this.sort;
+      this.tableLength=this.dataSource.data.length;
 
      
    } else {
@@ -262,6 +269,7 @@ ngDoCheck() {
         this.dataSource = new MatTableDataSource<SiteShort>(this.serverList);
         this.dataSource.paginator = this.paginator;
         this.dataSource.sort = this.sort;
+        this.tableLength=this.dataSource.data.length;
         
       }
     ).catch(
@@ -281,6 +289,7 @@ ngDoCheck() {
           this.dataSource = new MatTableDataSource<SiteShort>(this.serverList);
           this.dataSource.paginator = this.paginator;
           this.dataSource.sort = this.sort;
+          this.tableLength=this.dataSource.data.length;
          
         }
       ).catch(
@@ -318,4 +327,30 @@ onLogout(){
 applyFilter(filterValue: string) {
   this.dataSource.filter = filterValue.trim().toLowerCase();
 }
+
+
+getPageSizeOptions(): number[] {
+   //console.log(this.dataSource.data.length);
+   const real_length  = this.dataSource.data.length;
+   var options = [1,2];
+   options = [];
+   for(var i = 0, len = this.defaultPageSizeOptions.length; i < len; i++){
+    //console.log(this.defaultPageSizeOptions[i]);
+     if ( this.defaultPageSizeOptions[i] <= real_length) {
+       options.push(this.defaultPageSizeOptions[i]);
+     } else {
+       options.push(real_length);
+       break;
+     }
+   }
+
+   if ( i == this.defaultPageSizeOptions.length) {
+     options.push(real_length);
+   }
+   //console.log(options);
+   
+   return options;
+}
+
+
 }