TECHNOLOGIES
FORUMS
JOBS
BOOKS
EVENTS
INTERVIEWS
Live
MORE
LEARN
Training
CAREER
MEMBERS
VIDEOS
NEWS
BLOGS
Sign Up
Login
No unread comment.
View All Comments
No unread message.
View All Messages
No unread notification.
View All Notifications
Answers
Post
An Article
A Blog
A News
A Video
An EBook
An Interview Question
Ask Question
Forums
Monthly Leaders
Forum guidelines
ahmed elbarbary
NA
1.6k
275.4k
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
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
import
{ Component, OnInit, ViewChild, ElementRef } from
'@angular/core'
;
import
{ Router } from
'@angular/router'
;
import
{ ActivatedRoute } from
'@angular/router'
import
{ DisplayreportService } from
'../displayreport.service'
;
import
{ reportfilter } from
'../reportfilter.model'
;
import
* as XLSX from
'xlsx'
import
* as FileSaver from
'file-saver'
;
import
{ PaginationService } from
'../pagination.service'
;
import
{ JsonPipe } from
'@angular/common'
;
import
{ reportsperpages } from
'../reportsperpages'
;
//const EXCEL_TYPE = 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=UTF-8';
const
EXCEL_TYPE =
'application/vnd.ms-excel;charset=utf-8'
;
const
EXCEL_EXTENSION =
'.xlsx'
;
@Component({
selector:
'app-reportdetails'
,
templateUrl:
'./reportdetails.component.html'
,
styleUrls: [
'./reportdetails.component.css'
]
})
export
class
ReportdetailsComponent
implements
OnInit {
@ViewChild(
'TABLE'
, {
static
:
false
}) TABLE: ElementRef;
title =
'Excel'
;
reportid: string;
datareturned: any;
searchData: any = {};
reportdetailslist: any[];
headerCols: string[] = [];
contentBody: any[] = [];
reportList: any[] = [];
FilterList: any[] = [];
FilterBinddata: any[] = [];
ReportData:any={};
//for paging
pageNumber:
boolean
[] = [];
pageField = [];
exactPageList: any;
paginationData: number;
ReportPerPage: any = reportsperpages.large;
totalReports: any;
totalReportCount: any;
ParamReportid : string;
//companies = [];
pageNo: any = 1;
currentPage = 1;
AllReports=[];
//===enum
smallPageRow:
boolean
=
true
;
mediumPageRow:
boolean
=
false
;
largePageRow:
boolean
=
false
;
small = reportsperpages.small;
medium = reportsperpages.medium;
large = reportsperpages.large;
//=====
constructor(
private
router: ActivatedRoute,
private
_displayreport: DisplayreportService,
public
paginationService: PaginationService) {
}
ngOnInit() {
const
paramIndex = window.location.href.indexOf(
'id='
);
if
(paramIndex > 0) {
let param = window.location.href.substring(paramIndex);
let param1 = param.split(
'&'
)[0];
let param2 = param.substr(param.indexOf(
'='
) + 1);
this
.ParamReportid=param2;
console.log(param2);
//------------------
this
.pageNumber[0] =
true
;
this
.paginationService.temppage = 0;
//=================
//------for menu
this
._displayreport.GetReportFilteresById(param2).subscribe((data: any[]) => {
this
.FilterList = data;
console.log(
"Filter reports"
+
this
.FilterList);
});
console.log (
"value of report id"
+ param2)
this
._displayreport.GetReportFilterBind(param2).subscribe((data2: any[]) => {
this
.FilterBinddata = data2;
console.log(
"Filter reports2"
+
this
.FilterBinddata[1].reportSource);
});
//-------------get data for report
this
._displayreport.GetsubReportsById(param2).subscribe((data3: any) => {
this
.ReportData = data3;
console.log(
"databyid"
+ JSON.stringify(
this
.ReportData) );
});
this
.searchData.PageNumber=
this
.pageNo;
this
.searchData.RowCountPerPage=
this
.ReportPerPage;
this
.searchData.ReportID=param2;
// console.log("data " + this.searchData);
// this._displayreport.GetReportDetailsByReportId(param2).subscribe((data: any[]) => {
this
._displayreport.GetReportDetailsPaging(
this
.searchData).subscribe((data: any[]) => {
this
.reportdetailslist = data;
console.log(
"details is"
+ data )
this
.totalReportCount=
this
.getAllReportsCount();
console.log(
"total count is "
+
this
.totalReportCount)
//this.reportdetailslist.forEach(function(e) { e.download=1 });
//console.log("data after add download " + JSON.stringify(this.reportdetailslist) );
//console.log("original after add download " + JSON.stringify(data) );
//====modify object based on third type report
//if(this.ReportData.inRunTime=0 && this.ReportData.downLoadProcedureName !==null && this.ReportData.parameterName !==null)
//{
//if(this.ReportData.inRunTime=0 && this.ReportData.downLoadProcedureName ==null && this.ReportData.parameterName ==null)
//{
//for(let idx = 0; idx < data.length; idx++) {
//data[idx].download = 1;
// }
//==================
var
assignwhennull={};
Object.assign(assignwhennull,data)
//---
this
.headerCols = Object.keys(data[0]);
console.log(
"header col"
+
this
.headerCols);
data.forEach((item) =>{
let values = Object.keys(item).map((key)=> item[key]);
this
.contentBody.push(values);
console.log(
"contenet "
+ JSON.stringify(
this
.contentBody));
});
//}
console.log(
"data "
+
this
.reportdetailslist)
});
//this._displayreport.GetReportDetails(param2)
// .subscribe(data =>this.datareturned=data)
//console.log(this.datareturned);
}
// console.log(this.router.snapshot.params['id']);
//this.reportid=this.router.snapshot.params['id'];
//console.log("value is " + this.reportid)
console.log(
"thank you ahmed"
);
}
showReportsByPageNumber(page, i) {
this
.AllReports=[] ;
this
.pageNumber = [];
this
.pageNumber[i] =
true
;
console.log(
"value of page "
+
this
.pageNumber[i])
console.log(
"value of i "
+ i)
this
.searchData.PageNumber = page;
this
.getalldatareports();
}
totalNoOfPages() {
this
.paginationData = Number(
this
.totalReportCount /
this
.ReportPerPage);
let tempPageData =
this
.paginationData.toFixed();
if
(Number(tempPageData) <
this
.paginationData) {
this
.exactPageList = Number(tempPageData) + 1;
this
.paginationService.exactPageList =
this
.exactPageList;
}
else
{
this
.exactPageList = Number(tempPageData);
this
.paginationService.exactPageList =
this
.exactPageList
}
this
.paginationService.pageOnLoad();
this
.pageField =
this
.paginationService.pageField;
}
getAllReportsCount() {
// this._displayreport.getAllReportsCount(this.ParamReportid).subscribe((res: any) => {
// this.totalReportCount = res;
this
._displayreport.GetReportDetailsPaging(
this
.searchData).subscribe((data2: any[]) => {
this
.totalReportCount = data2[0].totalCount;
console.log(
"count rows is "
+
this
.totalReportCount);
this
.totalNoOfPages();
})
//this._displayreport.getAllReportsCount(this.ParamReportid).subscribe((res: any) => {
// this.totalReportCount = res;
//this.totalNoOfPages();
// })
}
showPrevReports() {
if
(
this
.paginationService.showNoOfCurrentPage != 1) {
this
.paginationService.prevReports();
this
.pageNumber = [];
this
.pageNumber[0] =
true
;
this
.currentPage =
this
.paginationService.pageField[0];
this
.getalldatareports();
}
}
showNextReports() {
if
(
this
.paginationService.disabledNextBtn ==
false
) {
this
.pageNumber = [];
this
.paginationService.nextReports();
this
.pageNumber[0] =
true
;
this
.currentPage =
this
.paginationService.pageField[0];
this
.getalldatareports();
}
}
setRecPerPage(noOfRec) {
this
.AllReports = [];
this
.pageNumber = [];
this
.pageNumber[0] =
true
;
this
.paginationService.temppage = 0;
if
(noOfRec == reportsperpages.small) {
this
.smallPageRow =
true
;
this
.mediumPageRow =
false
;
this
.largePageRow =
false
;
this
.ReportPerPage = noOfRec;
this
.currentPage = 1;
this
.pageNumber[0] =
true
;
this
.getalldatareports();
}
else
if
(noOfRec == reportsperpages.medium) {
this
.smallPageRow =
false
;
this
.mediumPageRow =
true
;
this
.largePageRow =
false
;
this
.ReportPerPage = noOfRec;
this
.currentPage = 1;
this
.pageNumber[0] =
true
;
this
.getalldatareports();
}
else
{
this
.smallPageRow =
false
;
this
.mediumPageRow =
false
;
this
.largePageRow =
true
;
this
.ReportPerPage = noOfRec;
this
.currentPage = 1;
this
.pageNumber[0] =
true
;
this
.getalldatareports();
}
//this.pageSize = page;
}
getalldatareports()
{
console.log(
"welcome"
+ JSON.stringify(
this
.searchData));
this
._displayreport.GetReportDetailsPaging(
this
.searchData).subscribe((data2: any[]) => {
this
.reportdetailslist=[];
this
.reportdetailslist=
null
;
this
.AllReports = data2;
console.log(
"details is"
+ data2 )
this
.getAllReportsCount();
var
assignwhennull={};
Object.assign(assignwhennull,data2)
this
.headerCols = Object.keys(data2[0]);
console.log(
"header col"
+
this
.headerCols);
data2.forEach((item) =>{
let values = Object.keys(item).map((key)=> item[key]);
this
.contentBody.push(values);
console.log(
"contenet "
+ JSON.stringify(
this
.contentBody));
});
});
}
}
Reply
Answers (
1
)
How to pass data from component to another on angular 7 ?
How to prevent totalCount Column from display ?