When retrieving data from the backend using a service, I encounter an issue where the system may slow down if 2000 records are returned in one request. To address this, I would like to display only 10 records per page and fetch the next 10 records with each click on the next page. Should this implementation be done on the backend or frontend? As a beginner, I appreciate any guidance you can provide.
HTML Code
<div class="row clearfix" [@routerTransition]>
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div class="card main-content" >
<div class="header">
<h2>
{{l('Schools')}}
</h2>
<ul class="header-dropdown m-r--5">
<i class="fa fa-spin fa-spinner" *ngIf="isTableLoading"></i>
<li class="dropdown">
<a href="javascript:void(0);" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
<i class="material-icons">more_vert</i>
</a>
<ul class="dropdown-menu pull-right">
<li><a href="javascript:void(0);" class=" waves-effect <waves-block></waves-block>" (click)="refresh();"><i class="material-icons">refresh</i> Refresh</a></li>
</ul>
</li>
</ul>
</div>
<div class="body table-responsive" style="padding-bottom: 40px">
<table class="table table-hover table-striped" >
<thead>
<tr>
<th>{{l('Name')}}</th>
<th>{{l('Registration Number')}}</th>
<th>{{l('Enrollment Type')}}</th>
<th>{{l('Entity Type')}}</th>
<th>{{l('Location')}}</th>
<th>{{l('Actions')}}</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let school of schoollists | paginate: { id: 'server', itemsPerPage: pageSize, currentPage: pageNumber, totalItems: totalItems }; let i = index">
<td>{{school.name}}</td>
<td>{{school.registrationNumber}}</td>
<td>{{school.educationType}}</td>
<td>{{school.administrativeType}}</td>
<td>{{school.county}}<span>,</span>{{school.city}}<span>,</span>{{school.district}}</td>
<td class="dropdown">
<a href="javascript:void(0);" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
<i class="material-icons">menu</i>
</a>
<ul class="dropdown-menu pull-right">
<li *ngIf="supportAdminCheck"><a class="waves-effect waves-block" (click)="editSchool(school.schoolTenantName)"><i class="material-icons">create</i>Edit</a></li>
<li *ngIf="supportAdminCheck"><a href="javascript:void(0);" class="waves-effect waves-block" (click)="delete(school)"><i class="material-icons">delete_sweep</i>Delete</a></li>
<li><a class="waves-effect waves-block" (click)="schoolDetail(school.schoolTenantName)"><i class="material-icons">details</i>View</a></li>
</ul>
</td>
</tr>
</tbody>
</table>
<div class="text-align: center;" *ngIf="totalItems > pageSize">
<pagination-controls (pageChange)="getDataPage($event)" id="server"></pagination-controls>
</div>
<!-- <br> -->
<button type="button" data-toggle="modal" class="btn btn-primary btn-circle waves-effect waves-circle waves-float pull-right" (click)="createRole()">
<i class="material-icons">add</i>
</button>
</div>
</div>
</div>
TypeScript Code
list(request: PagedRequestDto, pageNumber: number, finishedCallback: Function): void {
this._schoollistService.getAll()
.finally( ()=> {
finishedCallback();
})
.subscribe((result: PagedResultDtoOfSchoolListDto)=>{
this.schoollists = result.items;
this.showPaging(result, pageNumber);
this.supportAdminCheck = false;
if (this.appSession.tenant === undefined && this._utilsService.getCookieValue(AppConsts.authorization.roleName) === 'SuperAdmin') {
this.supportAdminCheck = true;
} else {
this.supportAdminCheck = false;
}
});
}