I have tried a pagination in LWC - lwc

Question

I have tried a pagination to display my accounts. The issue I found with the below code is when i click on 2, the list is iterating and display one more array list. At first, it looks 1 2 3 4 5 when i click on any number it displays as 1 2 3 4 2 3 4 5 and on another click 1 2 3 4 2 3 4 2 3 4 5. Basically, it displays the arraylist one more to the original one.
html:
<template>
<lightning-card title="Pagination on Account">
<div class="slds-var-m-around_medium">
<template if:true={showAccounts}>
<template for:each={showAccounts} for:item="a">
<p key={a.Id}>{a.Name}</p>
</template>
</template>
</div>
<lightning-layout>
<lightning-layout-item padding="around-small" flexibility="auto">
<div class="slds-grid slds-wrap">
<lightning-button icon-name="utility:chevronleft" icon-position="left" onclick={prev}></lightning-button>
<span class="slds-p-horizontal_x-small" title="Display">
<a onclick={processMe} name="1"
class={displayPageNumber}>1</a>
</span>
<template for:each={pageList} for:item="item">
<div key={item.Id}>
<span class="slds-p-horizontal_x-small" title="DisplayMore">
<a onclick={processMe} name={item}
class={displaymore}>{item}</a>
</span>
</div>
</template>
<span class="slds-p-horizontal_x-small" title="Display">
<a onclick={processMe} name={totalPage}
class={displayTotalPage}>{totalPage}</a>
</span>
<lightning-button icon-name="utility:chevronright" icon-position="right" onclick={next}></lightning-button>
</div>
</lightning-layout-item>
</lightning-layout>
</lightning-card>
</template>
.js
import { LightningElement,wire,track } from 'lwc';
import getAccounts from '#salesforce/apex/PaginationonAccounts.getAccounts';
export default class PaginationonAccounts extends LightningElement {
totalAccounts;
currentPageNumber = 1;
showAccounts;
pageSize = 10;
pageList = [];
item;
totalPage = 0;
#wire(getAccounts)
wiredAccounts({data,error}) {
if(data)
{
this.totalAccounts = data;
console.log('Total Accounts',this.totalAccounts);
this.totalPage = Math.ceil(data.length/this.pageSize);
this.currentPageNumber = 1;
this.buildData();
}
}
prev(event)
{
if(this.currentPageNumber > 1)
{
console.log('Previous');
this.currentPageNumber = this.currentPageNumber-1;
this.buildData();
}
}
processMe(event)
{
console.log('Process me');
this.currentPageNumber = parseInt(event.target.name);
console.log('Process me Page Number',this.currentPageNumber);
this.buildData();
}
next(event)
{
if(this.currentPageNumber < this.totalPage)
{
this.currentPageNumber = this.currentPageNumber+1;
this.buildData();
}
}
//to display pageNumbers
get displayPageNumber()
{
if(this.currentPageNumber == 1)
{
return 'selected';
}
else
{
return '';
}
}
//to display more pageNumbers
get displaymore()
{
if(this.currentPageNumber === this.item)
{
return 'selected';
}
else
{
return '';
}
}
//to display totalPage
get displayTotalPage()
{
if(this.currentPageNumber == this.totalPage)
{
return 'selected';
}
else
{
return '';
}
}
buildData()
{
console.log('Build data');
var data = [];
var pageNumber = this.currentPageNumber;
var pageSize = this.pageSize;
var totalAccounts = this.totalAccounts;
var x = (pageNumber-1)*pageSize;
for(; x<=(pageNumber)*pageSize; x++)
{
if(totalAccounts[x])
{
data.push(totalAccounts[x]);
}
}
this.showAccounts = data;
this.generatePageList(pageNumber);
}
generatePageList(pageNumber)
{
pageNumber= parseInt(pageNumber);
console.log('Page Number',pageNumber);
//this.pageList = [];
if(this.totalPage > 1)
{
if(this.totalPage <= 10)
{
var counter = 2;
for(; counter < (this.totalPage); counter++)
{
this.pageList.push(counter);
}
}
else
{
if(pageNumber < 5)
{
this.pageList.push(2,3,4,5,6);
}
else
{
if(pageNumber>(this.totalPage-5)){
this.pageList.push(this.totalPage-5, this.totalPage-4,
this.totalPage-3, this.totalPage-2, this.totalPage-1);
} else{
this.pageList.push(pageNumber-2, pageNumber-1, pageNumber,
pageNumber+1, pageNumber+2);
}
}
}
}
}
}
css
.THIS .selected{
color:orange;
}