Post
Ask Question
ahmed elbarbary

ahmed elbarbary

  • 638
  • 1.6k
  • 281.7k

when click page number on paging angular 7 it accumulate ?

May 11 2020 5:43 AM
 when click page number on paging angular 7 it accumulate ?
 
I make paging on angular 7 app 
 
firstly app load with paging without any proplem meaning if i give 10 rows per page
 
when load component it display correct
 
problem strat when click page 2
 
it become 20 rows displayed on screen
 
if i click 3 it become 60 rows displayed on screen
 
i need when click page 2 display second ten rows 
 
but not accumlate records on screen
so how to solve this issue please ?
 
so i get code forom this link
  1. https://www.c-sharpcorner.com/article/server-side-pagination-using-asp-net-core-and-angular-8-part-two/  
 for more clear 
pag1 display 20 rows 
page2 display next 20 rows
this  not happen it display for second page 40 rows why 
  1. import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';  
  2. import { Router } from '@angular/router';  
  3. import { ActivatedRoute } from '@angular/router'  
  4. import { DisplayreportService } from '../displayreport.service';  
  5. import { reportfilter } from '../reportfilter.model';  
  6. import * as XLSX from 'xlsx'  
  7. import * as FileSaver from 'file-saver';  
  8. import { PaginationService } from '../pagination.service';  
  9. import { JsonPipe } from '@angular/common';  
  10. import { reportsperpages } from '../reportsperpages';  
  11. //const EXCEL_TYPE = 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=UTF-8';  
  12. const EXCEL_TYPE = 'application/vnd.ms-excel;charset=utf-8';  
  13. const EXCEL_EXTENSION = '.xlsx';  
  14. @Component({  
  15.   selector: 'app-reportdetails',  
  16.   templateUrl: './reportdetails.component.html',  
  17.   styleUrls: ['./reportdetails.component.css']  
  18. })  
  19. export class ReportdetailsComponent implements OnInit {  
  20.   @ViewChild('TABLE', { static: false }) TABLE: ElementRef;   
  21.   title = 'Excel';   
  22.   reportid: string;  
  23.   datareturned: any;  
  24.   searchData: any = {};  
  25.   reportdetailslist: any[];  
  26.   headerCols: string[] = [];  
  27.   contentBody: any[] = [];  
  28.   reportList: any[] = [];  
  29.   FilterList: any[] = [];  
  30.   FilterBinddata: any[] = [];  
  31.   ReportData:any={};  
  32.   //for paging  
  33.   pageNumber: boolean[] = [];   
  34.   pageField = [];    
  35.       exactPageList: any;    
  36.   paginationData: number;    
  37.   ReportPerPage: any = reportsperpages.large;   
  38.   totalReports: any;    
  39.   totalReportCount: any;  
  40.   ParamReportid : string;  
  41.   //companies = [];    
  42.   pageNo: any = 1;   
  43.   currentPage = 1;    
  44.   AllReports=[];  
  45.   //===enum  
  46.   smallPageRow: boolean = true;    
  47.   mediumPageRow: boolean = false;    
  48.   largePageRow: boolean = false;    
  49.     
  50.   small = reportsperpages.small;    
  51.   medium = reportsperpages.medium;    
  52.   large = reportsperpages.large;    
  53.   //=====  
  54.   constructor(private router: ActivatedRoute, private _displayreport: DisplayreportService,public paginationService: PaginationService) {  
  55.       
  56.    }  
  57.      
  58.     
  59.    
  60.    
  61.     
  62.   ngOnInit() {  
  63.     const paramIndex = window.location.href.indexOf('id=');  
  64.     if (paramIndex > 0) {  
  65.       let param = window.location.href.substring(paramIndex);  
  66.       let param1 = param.split('&')[0];  
  67.       let param2 = param.substr(param.indexOf('=') + 1);  
  68.       this.ParamReportid=param2;  
  69.       console.log(param2);  
  70.       //------------------  
  71.       this.pageNumber[0] = true;    
  72.       this.paginationService.temppage = 0;   
  73.         
  74.       //=================  
  75. //------for menu  
  76.       this._displayreport.GetReportFilteresById(param2).subscribe((data: any[]) => {  
  77.         this.FilterList = data;  
  78.         console.log("Filter reports" + this.FilterList);  
  79.       });  
  80.       console.log ("value of report id" + param2)  
  81.       this._displayreport.GetReportFilterBind(param2).subscribe((data2: any[]) => {  
  82.         this.FilterBinddata = data2;  
  83.         console.log("Filter reports2" + this.FilterBinddata[1].reportSource);  
  84.       });  
  85.       //-------------get data for report  
  86.       this._displayreport.GetsubReportsById(param2).subscribe((data3: any) => {  
  87.         this.ReportData = data3;  
  88.         console.log("databyid" + JSON.stringify(this.ReportData) );  
  89.       });  
  90.         
  91.       this.searchData.PageNumber=this.pageNo;  
  92.       this.searchData.RowCountPerPage=this.ReportPerPage;  
  93.       this.searchData.ReportID=param2;  
  94.        
  95.      // console.log("data " + this.searchData);  
  96.      // this._displayreport.GetReportDetailsByReportId(param2).subscribe((data: any[]) => {  
  97.       this._displayreport.GetReportDetailsPaging(this.searchData).subscribe((data: any[]) => {  
  98.           
  99.         this.reportdetailslist = data;  
  100.         console.log("details is" + data )  
  101.       this.totalReportCount=this.getAllReportsCount();  
  102.       console.log("total count is " + this.totalReportCount)  
  103.         //this.reportdetailslist.forEach(function(e) { e.download=1 });  
  104.         //console.log("data after add download " + JSON.stringify(this.reportdetailslist) );  
  105.         //console.log("original after add download " + JSON.stringify(data) );  
  106.         //====modify object based on third type report  
  107.         //if(this.ReportData.inRunTime=0 && this.ReportData.downLoadProcedureName !==null && this.ReportData.parameterName !==null)  
  108.         //{  
  109.             
  110.           //if(this.ReportData.inRunTime=0 && this.ReportData.downLoadProcedureName ==null && this.ReportData.parameterName ==null)  
  111.           //{  
  112.   
  113.           //for(let idx = 0; idx < data.length; idx++) {  
  114.             //data[idx].download = 1;  
  115.               
  116.             
  117.          
  118.             
  119.        // }  
  120.         //==================  
  121.      
  122. var assignwhennull={};  
  123. Object.assign(assignwhennull,data)  
  124.           //---  
  125.         this.headerCols = Object.keys(data[0]);  
  126.         console.log("header col" + this.headerCols);  
  127.         data.forEach((item) =>{  
  128.           let values = Object.keys(item).map((key)=> item[key]);  
  129.           this.contentBody.push(values);  
  130.           console.log("contenet " + JSON.stringify( this.contentBody));  
  131.           
  132.    });  
  133.   //}  
  134.         console.log("data " + this.reportdetailslist)  
  135.       });  
  136.         
  137.       //this._displayreport.GetReportDetails(param2)    
  138.       // .subscribe(data =>this.datareturned=data)    
  139.       //console.log(this.datareturned);  
  140.     }  
  141.     // console.log(this.router.snapshot.params['id']);  
  142.     //this.reportid=this.router.snapshot.params['id'];  
  143.     //console.log("value is " + this.reportid)  
  144.     console.log("thank you ahmed");  
  145.   }  
  146.   showReportsByPageNumber(page, i) {    
  147.    
  148.     this.AllReports=[] ;  
  149.     this.pageNumber = [];    
  150.     this.pageNumber[i] = true;    
  151.     console.log("value of page " + this.pageNumber[i])  
  152.     console.log("value of i " + i)  
  153.     this.searchData.PageNumber = page;    
  154.       
  155.     this.getalldatareports();  
  156.   }  
  157.   totalNoOfPages() {    
  158.     
  159.     this.paginationData = Number(this.totalReportCount / this.ReportPerPage);    
  160.     let tempPageData = this.paginationData.toFixed();    
  161.     if (Number(tempPageData) < this.paginationData) {    
  162.       this.exactPageList = Number(tempPageData) + 1;    
  163.       this.paginationService.exactPageList = this.exactPageList;    
  164.     } else {    
  165.       this.exactPageList = Number(tempPageData);    
  166.       this.paginationService.exactPageList = this.exactPageList    
  167.     }    
  168.     this.paginationService.pageOnLoad();    
  169.     this.pageField = this.paginationService.pageField;    
  170.     
  171.   }    
  172.   getAllReportsCount() {    
  173.    // this._displayreport.getAllReportsCount(this.ParamReportid).subscribe((res: any) => {    
  174.      // this.totalReportCount = res;    
  175.      this._displayreport.GetReportDetailsPaging(this.searchData).subscribe((data2: any[]) => {  
  176.         
  177.       this.totalReportCount = data2[0].totalCount;  
  178.       console.log("count rows is " + this.totalReportCount);  
  179.       this.totalNoOfPages();    
  180.     })    
  181.    //this._displayreport.getAllReportsCount(this.ParamReportid).subscribe((res: any) => {    
  182.    // this.totalReportCount = res;    
  183.     //this.totalNoOfPages();    
  184.  // })    
  185.   }   
  186.   showPrevReports() {    
  187.     
  188.     if (this.paginationService.showNoOfCurrentPage != 1) {    
  189.       this.paginationService.prevReports();    
  190.       this.pageNumber = [];    
  191.       this.pageNumber[0] = true;    
  192.       this.currentPage = this.paginationService.pageField[0];    
  193.       this.getalldatareports();    
  194.     }    
  195.     
  196.   }   
  197.   showNextReports() {    
  198.     
  199.     if (this.paginationService.disabledNextBtn == false) {    
  200.       this.pageNumber = [];    
  201.       this.paginationService.nextReports();    
  202.       this.pageNumber[0] = true;    
  203.       this.currentPage = this.paginationService.pageField[0];    
  204.       this.getalldatareports();    
  205.     }    
  206.   }   
  207.   setRecPerPage(noOfRec) {    
  208.     
  209.     this.AllReports = [];    
  210.     this.pageNumber = [];    
  211.     this.pageNumber[0] = true;    
  212.     this.paginationService.temppage = 0;    
  213.     if (noOfRec == reportsperpages.small) {    
  214.       this.smallPageRow = true;    
  215.       this.mediumPageRow = false;    
  216.       this.largePageRow = false;    
  217.       this.ReportPerPage = noOfRec;    
  218.       this.currentPage = 1;    
  219.       this.pageNumber[0] = true;    
  220.       this.getalldatareports();    
  221.     
  222.     }    
  223.     else if (noOfRec == reportsperpages.medium) {    
  224.       this.smallPageRow = false;    
  225.       this.mediumPageRow = true;    
  226.       this.largePageRow = false;    
  227.       this.ReportPerPage = noOfRec;    
  228.       this.currentPage = 1;    
  229.       this.pageNumber[0] = true;    
  230.       this.getalldatareports();    
  231.     
  232.     } else {    
  233.       this.smallPageRow = false;    
  234.       this.mediumPageRow = false;    
  235.       this.largePageRow = true;    
  236.       this.ReportPerPage = noOfRec;    
  237.       this.currentPage = 1;    
  238.       this.pageNumber[0] = true;    
  239.       this.getalldatareports();    
  240.     
  241.     }    
  242.     //this.pageSize = page;    
  243.   }      
  244.   getalldatareports()  
  245.   {  
  246.       
  247.     console.log("welcome" + JSON.stringify(this.searchData));  
  248.     this._displayreport.GetReportDetailsPaging(this.searchData).subscribe((data2: any[]) => {  
  249.       this.reportdetailslist=[];  
  250.       this.reportdetailslist=null;  
  251.       this.AllReports = data2;  
  252.       console.log("details is" + data2 )  
  253.       this.getAllReportsCount();  
  254.         
  255.    
  256. var assignwhennull={};  
  257. Object.assign(assignwhennull,data2)  
  258.        
  259.       this.headerCols = Object.keys(data2[0]);  
  260.       console.log("header col" + this.headerCols);  
  261.       data2.forEach((item) =>{  
  262.         let values = Object.keys(item).map((key)=> item[key]);  
  263.         this.contentBody.push(values);  
  264.         console.log("contenet " + JSON.stringify( this.contentBody));  
  265.         
  266.  });  
  267. });  
  268.   }    
  269.     
  270.   
  271. }  
 
 
 

Answers (1)