{{announcement.body}}
{{announcement.title}}

Server Side Pagination Using ASP.NET Core And Angular 8 - Part Two

DZone 's Guide to

Server Side Pagination Using ASP.NET Core And Angular 8 - Part Two

In the second part of this tutorial series, we take a look at some of the updated code for creating pagination using Angular 8 and ASP.NET Core.

· Web Dev Zone ·
Free Resource

Introduction

In this article, we will learn how we create server-side pagination, which is very useful whenever we need to display a large number of records. This is the second part of my article on server-side pagination, you can check out the first part of this article from the link below. 

How It Will Work?

In this article, we are going to show previous and next buttons with custom logic so whenever we click on next button it shows the next page of records. For example, suppose we are on page one and after clicking on next, it would show the second page of records. However, here we will see different logic. 

Backend

Here in the previous article we have already created database and tables so there's no need to create it again. If you don't have the related database, tables, and stored procedure, then please check the previous article

Web API

Complete code of pagination controller:   

C#
 




x
30


 
1
using System.Collections.Generic;  
2
using System.Data.Entity.Core.Objects;  
3
using System.Linq;  
4
using System.Web.Http;  
5
using Pagination.Models;  
6
namespace Pagination.Controllers  
7
{  
8
    public class PaginationController : ApiController  
9
    {  
10
        CompanyEntities2 db = new CompanyEntities2();  
11
  
12
        [HttpGet]  
13
        public object getAllCompanies(int pageNo, int pageSize, string sortOrder)  
14
        {  
15
  
16
            var oMyString = new ObjectParameter("totalCount", typeof(int));  
17
  
18
            var companyDetails = db.Usp_GetAllCompanies(pageNo, pageSize, sortOrder).ToList();  
19
            return companyDetails;  
20
        }  
21
  
22
        [HttpGet]  
23
        public object getAllCompaniesCount()  
24
        {  
25
  
26
            var companyDetailsCount = db.Usp_getAllCompaniesCount().SingleOrDefault();         
27
            return companyDetailsCount;  
28
        }  
29
    }  
30
}  


 

Front End

Step 1

Let's copy the HTML code and replace it with the pagination.html file. I have made some changes compared to part one, with new buttons to check number of records in one page, so when you click on 10, then 10 records will show on one page.

HTML
 




xxxxxxxxxx
1
81


1
<div class="row">  
2
    <div class="col-12 col-md-12">  
3
        <div class="card">  
4
            <div class="card-header">  
5
                <div class="row">  
6
                    <div>    
7
Companies 1-{{pageSize}} (Total:{{totalCompaniesCount}})    
8
</div>  
9
                    <div style="margin: auto;" class="add-row add-row-rel top-paging">  
10
                        <span class="cpp">Companies per page:</span>  
11
                        <a (click)="setRecPerPage(small)" [ngClass]="smallPageRow? 'active':'mr-2'">{{small}}</a>  
12
                        <a (click)="setRecPerPage(medium)" [ngClass]="mediumPageRow? 'active':'mr-2'">{{medium}}</a>  
13
                        <a (click)="setRecPerPage(large)" [ngClass]="largePageRow? 'active':'mr-2'">{{large}}</a>  
14
                    </div>  
15
                </div>  
16
            </div>  
17
            <div class="card-body position-relative">  
18
                <!-- <div class="tbl-note-dentist">    
19
Sort list by select <span>table headers</span>, click again to reorder    
20
ascending/descending    
21
</div> -->  
22
                <div class="table-responsive cnstr-record companie-tbl">  
23
                    <table class="table table-bordered heading-hvr">  
24
                        <thead>  
25
                            <tr>  
26
                                <th style="cursor: pointer;" [ngClass]="order =='CompanyNumber'? 'active':''"    
27
(click)="setOrder('CompanyNumber')" width="80">Company Name.</th>  
28
                                <th style="cursor: pointer;" [ngClass]="order =='CompanyType'? 'active':''"    
29
(click)="setOrder('CompanyType')" width="75">City</th>  
30
                                <th [ngClass]="order =='CompanyName'? 'active':''" style="cursor: pointer;"    
31
(click)="setOrder('CompanyName')">State    
32
</th>  
33
                                <th [ngClass]="order =='OrgNo'? 'active':''" style="cursor: pointer;" (click)="setOrder('OrgNo')"    
34
width="75">CEO    
35
</th>  
36
                                <th [ngClass]="order =='Street'? 'active':''" style="cursor: pointer; width:250px"    
37
(click)="setOrder('Street')">Publish Year</th>  
38
                            </tr>  
39
                        </thead>  
40
                        <tbody>  
41
                            <tr *ngFor="let item of companies">  
42
                                <td>{{item.CompanyName}}</td>  
43
                                <td>{{item.City}}</td>  
44
                                <td>{{item.State}}</td>  
45
                                <td>{{item.Owner}}</td>  
46
                                <td>{{item.PublishYear}}</td>  
47
                            </tr>  
48
                        </tbody>  
49
                    </table>  
50
                </div>  
51
                <!-- Code by pagination -->  
52
                <div class="container mw-100">  
53
                    <div class="row">  
54
                        <div class="col-md-3"></div>  
55
                        <div *ngIf="companies !=0" class="col-md-6">  
56
                            <ul class="pagination justify-content-center">  
57
                                <li class="page-item">  
58
                                    <a (click)="showPrevCompanies()"    
59
[ngClass]="(paginationService.showNoOfCurrentPage ==1)?'notAllowed':'page-link'"    
60
style="margin-top: 5px; margin-right: 20px;cursor: pointer;">Prev</a>  
61
                                </li>  
62
                                <li *ngFor="let page of pageField;let i=index" class="page-item">  
63
                                    <a (click)="showCompaniesByPageNumber(page,i)" [ngClass]="pageNumber[i] ? 'pageColor':'page-link'"    
64
style=" margin-right: 5px;;margin-top: 5px;cursor: pointer;">{{page}}</a>  
65
                                </li>  
66
                                <li class="page-item">  
67
                                    <a (click)="showNextCompanies()"    
68
[ngClass]="(paginationService.disabledNextBtn)?'notAllowed':'page-link'"    
69
style="margin-top: 5px;margin-left: 20px; cursor: pointer;">Next</a>  
70
                                </li>  
71
                            </ul>  
72
                            <div style="text-align: center;">    
73
Page {{currentPage}} of Total page {{paginationService.exactPageList}}    
74
</div>  
75
                        </div>  
76
                    </div>  
77
                </div>  
78
            </div>  
79
        </div>  
80
    </div>  
81
</div>    


Step 2

There are some changes in the CSS file so just replace this code with pagination.component.css file.


CSS
 




xxxxxxxxxx
1
168


 
1
@charset "utf-8";  
2
/* CSS Document */  
3
@media all {  
4
    *{  
5
        padding: 0 px;margin: 0 px;  
6
    }  
7
    div {  
8
        vertical - align: top;  
9
    }  
10
    img {  
11
        max - width: 100 % ;  
12
    }  
13
    html {  
14
        -webkit - font - smoothing: antialiased; - moz - osx - font - smoothing: grayscale;  
15
    }  
16
    body {  
17
        overflow: auto!important;width: 100 % !important;  
18
    }  
19
    html, body {  
20
        background - color: #e4e5e6;  
21
    }  
22
    html {  
23
        position: relative;min - height: 100 % ;  
24
    }.card {  
25
        border - radius: 4 px;  
26
    }.card - header: first - child {  
27
        border - radius: 4 px 4 px 0 px 0 px;  
28
    }  
29
    /*Typekit*/  
30
    html, body {  
31
        font - family: 'Roboto', sans - serif;  
32
        font - weight: 400;  
33
        font - size: 13 px;  
34
    }  
35
    body {  
36
        padding - top: 52 px;  
37
    }  
38
    p {  
39
        font - family: 'Roboto', sans - serif;  
40
        color: #303030; font-weight:400; margin-bottom:1rem;}    
41
input, textarea, select{font-family:'Roboto', sans-serif;}    
42
h1,h2,h3,h4,h5,h6{font-family:'Roboto', sans-serif; font-weight:700;}    
43
h1{font-size:20px; color:# 000000;  
44
        margin - bottom: 10 px;  
45
    }  
46
    h2 {  
47
        font - size: 30 px;  
48
    }  
49
    h3 {  
50
        font - size: 24 px;  
51
    }  
52
    h4 {  
53
        font - size: 18 px;  
54
    }  
55
    h5 {  
56
        font - size: 14 px;  
57
    }  
58
    h6 {  
59
        font - size: 12 px;  
60
    }.row {  
61
        margin - right: -8 px;  
62
        margin - left: -8 px;  
63
    }.col, .col - 1, .col - 10, .col - 11, .col - 12, .col - 2, .col - 3, .col - 4, .col - 5, .col - 6, .col - 7, .col - 8, .col - 9, .col - auto, .col - lg, .col - lg - 1, .col - lg - 10, .col - lg - 11, .col - lg - 12, .col - lg - 2, .col - lg - 3, .col - lg - 4, .col - lg - 5, .col - lg - 6, .col - lg - 7, .col - lg - 8, .col - lg - 9, .col - lg - auto, .col - md, .col - md - 1, .col - md - 10, .col - md - 11, .col - md - 12, .col - md - 2, .col - md - 3, .col - md - 4, .col - md - 5, .col - md - 6, .col - md - 7, .col - md - 8, .col - md - 9, .col - md - auto, .col - sm, .col - sm - 1, .col - sm - 10, .col - sm - 11, .col - sm - 12, .col - sm - 2, .col - sm - 3, .col - sm - 4, .col - sm - 5, .col - sm - 6, .col - sm - 7, .col - sm - 8, .col - sm - 9, .col - sm - auto, .col - xl, .col - xl - 1, .col - xl - 10, .col - xl - 11, .col - xl - 12, .col - xl - 2, .col - xl - 3, .col - xl - 4, .col - xl - 5, .col - xl - 6, .col - xl - 7, .col - xl - 8, .col - xl - 9, .col - xl - auto {  
64
            padding - right: 8 px;  
65
            padding - left: 8 px;  
66
        }.card - header {  
67
            background - color: #f0f3f5;  
68
            border - bottom: 1 px solid #c8ced3;  
69
            font - size: 13 px;  
70
            font - weight: 600;  
71
            color: #464646; text-transform:uppercase; padding:.75rem 8px;}    
72
.cnstr-record th{white-space:nowrap;padding:.45rem .2rem; font-size:13px; border-bottom-width:0px!important;}    
73
.cnstr-record thead{background:# f0f3f5;  
74
        }.cnstr - record.form - control {  
75
            font - size: 13 px;  
76
            padding: 0 px 0 rem 0 px 0.2 rem;  
77
            height: calc(2 rem + 2 px);  
78
        }.cnstr - record select.form - control {  
79
            padding - left: .05 rem;  
80
        }.cnstr - record.table td, .cnstr - record.table th {  
81
            vertical - align: middle;  
82
        }.cnstr - record.table td {  
83
            padding: .3 rem;  
84
        }.cnstr - record.table td h4 {  
85
            margin: 0 px;  
86
        }.wp - 50 {  
87
            width: 50 px;  
88
        }.wp - 60 {  
89
            width: 60 px;  
90
        }.wp - 70 {  
91
            width: 70 px;  
92
        }.wp - 80 {  
93
            width: 80 px;  
94
        }.wp - 90 {  
95
            width: 90 px;  
96
        }.wp - 100 {  
97
            width: 100 px;  
98
        }.mw - auto {  
99
            min - width: inherit;  
100
        }.expand - row {  
101
            width: 100 % ;border: solid 1 px #596269; display:inline-block; border-radius:3px; width:16px; height:16px; vertical-align:top; background:# 596269;color: #ffffff!important;  
102
        }.expand - row img {  
103
            vertical - align: top;  
104
            position: relative;  
105
            top: 2 px;  
106
        }.sub - table th {  
107
            font - weight: 400;  
108
            font - size: 12 px;  
109
        }.sub - table td {  
110
            background: #efefef;  
111
        }.no - bg td {  
112
            background: inherit;  
113
        }.mw - 100 {  
114
            max - width: 100 % ;  
115
        }.activeTabColor {  
116
            color: #fff;  
117
            background - color: #000000;    
118
            }    
119
       .page-item:first-child .page-link {    
120
            margin-left: 0;    
121
            border-top-left-radius: .25rem;    
122
            border-bottom-left-radius: .25rem;    
123
            }    
124
    
125
      .pageColor{    
126
            position: relative;    
127
            display: block;    
128
            padding: .5rem .75rem;    
129
            margin-left: -1px;    
130
            line-height: 1.25;    
131
            color: white!important;    
132
            background-color: black!important;    
133
            border: 1px solid # dee2e6;  
134
        }.notAllowed {  
135
            position: relative;  
136
            display: block;  
137
            padding: .5 rem .75 rem;  
138
            margin - left: -1 px;  
139
            line - height: 1.25;  
140
            color: #007bff;    
141
            background-color: # fff;  
142
            border: 1 px solid #dee2e6;  
143
            cursor: not - allowed;  
144
        }.page - link {  
145
            position: relative;  
146
            display: block;  
147
            padding: .5 rem .75 rem;  
148
            margin - left: -1 px;  
149
            line - height: 1.25;  
150
            color: #007bff;    
151
            background-color: # fff;  
152
            border: 1 px solid #dee2e6;  
153
        }.mr - 2 {  
154
            background - color: #007bff;    
155
            color: white!important;    
156
            margin: 5px;    
157
            padding: 5px;    
158
            cursor: pointer;    
159
            }    
160
      .active{    
161
            background-color: black;    
162
            color: white!important;    
163
            margin: 5px;    
164
            padding: 5px;    
165
            cursor: pointer;    
166
         }    
167
    
168
}    


Step 3

Copy the below code and replace the original pagination.component.ts file.


JavaScript
 




xxxxxxxxxx
1
143


 
1
import { Component, OnInit } from '@angular/core';  
2
import { ApiService } from './api.service';  
3
import { PaginationService } from './pagination.service';  
4
import { CompaniesPerPage } from './CompaniesPerPage';  
5
  
6
@Component({  
7
  selector: 'app-pagination',  
8
  templateUrl: './pagination.component.html',  
9
  styleUrls: ['./pagination.component.css']  
10
})  
11
export class PaginationComponent implements OnInit {  
12
  
13
  companies = [];  
14
  pageNo: any = 1;  
15
  pageNumber: boolean[] = [];  
16
  sortOrder: any = 'CompanyName';  
17
  
18
  //Pagination Variables  
19
  //Page Row variables  
20
  smallPageRow: boolean = true;  
21
  mediumPageRow: boolean = false;  
22
  largePageRow: boolean = false;  
23
  
24
  small = CompaniesPerPage.small;  
25
  medium = CompaniesPerPage.medium;  
26
  large = CompaniesPerPage.large;  
27
  
28
  pageField = [];  
29
  exactPageList: any;  
30
  paginationData: number;  
31
  companiesPerPage: any = CompaniesPerPage.small;;  
32
  totalCompanies: any;  
33
  totalCompaniesCount: any;  
34
  currentPage = 1;  
35
  
36
  constructor(public service: ApiService, public paginationService: PaginationService) { }  
37
  
38
  ngOnInit() {  
39
    this.pageNumber[0] = true;  
40
    this.paginationService.temppage = 0;  
41
    this.getAllCompanies();  
42
  }  
43
  getAllCompanies() {  
44
    this.service.getAllCompanies(this.pageNo, this.companiesPerPage, this.sortOrder).subscribe((data: any) => {  
45
      this.companies = data;  
46
      this.getAllCompaniesCount();  
47
    })  
48
  }  
49
  getAllCompaniesCount() {  
50
    this.service.getAllCompaniesCount().subscribe((res: any) => {  
51
      this.totalCompaniesCount = res;  
52
      this.totalNoOfPages();  
53
    })  
54
  }  
55
  
56
  //Method For Pagination  
57
  totalNoOfPages() {  
58
  
59
    this.paginationData = Number(this.totalCompaniesCount / this.companiesPerPage);  
60
    let tempPageData = this.paginationData.toFixed();  
61
    if (Number(tempPageData) < this.paginationData) {  
62
      this.exactPageList = Number(tempPageData) + 1;  
63
      this.paginationService.exactPageList = this.exactPageList;  
64
    } else {  
65
      this.exactPageList = Number(tempPageData);  
66
      this.paginationService.exactPageList = this.exactPageList  
67
    }  
68
    this.paginationService.pageOnLoad();  
69
    this.pageField = this.paginationService.pageField;  
70
  
71
  }  
72
  showCompaniesByPageNumber(page, i) {  
73
    this.companies = [];  
74
    this.pageNumber = [];  
75
    this.pageNumber[i] = true;  
76
    this.pageNo = page;  
77
    this.currentPage =page;  
78
    this.getAllCompanies();  
79
  }  
80
  
81
  //Pagination Start  
82
  
83
  showPrevCompanies() {  
84
  
85
    if (this.paginationService.showNoOfCurrentPage != 1) {  
86
      this.paginationService.prevCompanies();  
87
      this.pageNumber = [];  
88
      this.pageNumber[0] = true;  
89
      this.currentPage = this.paginationService.pageField[0];  
90
      this.getAllCompanies();  
91
    }  
92
  
93
  }  
94
  
95
  showNextCompanies() {  
96
  
97
    if (this.paginationService.disabledNextBtn == false) {  
98
      this.pageNumber = [];  
99
      this.paginationService.nextCompanies();  
100
      this.pageNumber[0] = true;  
101
      this.currentPage = this.paginationService.pageField[0];  
102
      this.getAllCompanies();  
103
    }  
104
  }  
105
  
106
  setRecPerPage(noOfRec) {  
107
  
108
    this.companies = [];  
109
    this.pageNumber = [];  
110
    this.pageNumber[0] = true;  
111
    this.paginationService.temppage = 0;  
112
    if (noOfRec == CompaniesPerPage.small) {  
113
      this.smallPageRow = true;  
114
      this.mediumPageRow = false;  
115
      this.largePageRow = false;  
116
      this.companiesPerPage = noOfRec;  
117
      this.currentPage = 1;  
118
      this.pageNumber[0] = true;  
119
      this.getAllCompanies();  
120
  
121
    }  
122
    else if (noOfRec == CompaniesPerPage.medium) {  
123
      this.smallPageRow = false;  
124
      this.mediumPageRow = true;  
125
      this.largePageRow = false;  
126
      this.companiesPerPage = noOfRec;  
127
      this.currentPage = 1;  
128
      this.pageNumber[0] = true;  
129
      this.getAllCompanies();  
130
  
131
    } else {  
132
      this.smallPageRow = false;  
133
      this.mediumPageRow = false;  
134
      this.largePageRow = true;  
135
      this.companiesPerPage = noOfRec;  
136
      this.currentPage = 1;  
137
      this.pageNumber[0] = true;  
138
      this.getAllCompanies();  
139
  
140
    }  
141
    //this.pageSize = page;  
142
  }  
143
}   


Step 4

For fetching records per page we are using the  enum  class  CompaniesPerPage.ts. Create a new class called  CompaniesPerPage.ts and paste the below code.

JavaScript
 




xxxxxxxxxx
1


 
1
export enum CompaniesPerPage {  
2
small = 5,  
3
medium = 10,  
4
large= 15,  
5
displayNoOfPagesPerPage=10  
6
}  



Step 5 

For getting records from server, a service must be called to connect it with our web API, so just copy the below code and paste it in Api.service.ts file.

JavaScript
 




xxxxxxxxxx
1
23


 
1
import { Injectable } from '@angular/core';  
2
import { HttpClient } from '@angular/common/http';  
3
import { Observable } from 'rxjs';  
4
  
5
@Injectable({  
6
   providedIn: 'root'  
7
   })  
8
   export class ApiService {  
9
   private url = "";  
10
  
11
   constructor(public http: HttpClient) {  
12
}  
13
  
14
getAllCompanies(pageNo,pageSize,sortOrder): Observable<any> {  
15
   this.url = 'http://localhost:59390/api/Pagination/getAllCompanies?pageNo=' + pageNo+'&pageSize='+pageSize+'&sortOrder='+sortOrder;  
16
   return this.http.get(this.url);  
17
}  
18
  
19
getAllCompaniesCount(): Observable<any> {  
20
   this.url = 'http://localhost:59390/api/Pagination/getAllCompaniesCount';  
21
   return this.http.get(this.url);  
22
   }  
23
}  


Step 6

This is the most important file, as I have separated the logic from the pagination logic so that it would be very easy to reuse the same code rather than writing it every time.

Copy this below code and replace it with pagination.service.ts file.


JavaScript
 




xxxxxxxxxx
1
117


 
1
import { Injectable } from '@angular/core';  
2
import { CompaniesPerPage } from './CompaniesPerPage';  
3
  
4
@Injectable()  
5
  
6
export class PaginationService {  
7
    //Pagination Variables  
8
      
9
    pageNumberPerPage = 0;  
10
    pageNumberShow = CompaniesPerPage.displayNoOfPagesPerPage;  
11
    temppage: number = 0;  
12
    disabledNextBtn: boolean;  
13
    disabledPrevBtn: boolean = true;  
14
    pageField = [];  
15
    exactPageList: any;  
16
    prevtrue: boolean;  
17
    nexttrue: boolean;  
18
    currentPage = 1;  
19
    pageNumber: boolean[] = [];  
20
    showNoOfCurrentPage: any = 1;  
21
    showPageOnlyOntabsChange: boolean = true;  
22
    lastPage: any = 0;  
23
  
24
    constructor() {  
25
    }  
26
  
27
    // On page load   
28
    pageOnLoad() {  
29
        if (this.temppage == 0 ) {  
30
              
31
            this.pageField = [];  
32
            for (var a = 0; a < this.pageNumberShow; a++) {  
33
                this.pageField[a] = this.temppage + 1;  
34
                this.temppage = this.temppage + 1;  
35
                if (this.exactPageList == this.pageField[a]) {  
36
                    for (var b = 0; b < this.pageNumberShow - 7; b++) {  
37
                        if (a == b) {  
38
                            this.temppage = this.temppage - (b + 1);  
39
                            this.prevtrue = false;  
40
                            break;  
41
                        }  
42
                    }  
43
                    this.disabledNextBtn = true;  
44
                    break;  
45
                } else {  
46
                    this.disabledNextBtn = false;  
47
                }  
48
            }  
49
        }  
50
    }  
51
  
52
    prevCompanies() {  
53
  
54
        this.pageNumber[0] = true;  
55
        this.nexttrue = true;  
56
        if (this.showNoOfCurrentPage != 1) {  
57
            this.disabledNextBtn = false;  
58
            this.showNoOfCurrentPage = this.showNoOfCurrentPage - 1;  
59
            if (this.prevtrue) {  
60
                if (this.lastPage == 0) {  
61
                    this.temppage = this.temppage - 10;  
62
                    this.prevtrue = false;  
63
                } else {  
64
                    this.temppage = this.lastPage ;  
65
                    this.nexttrue =false;  
66
                    this.prevtrue = false;  
67
                    this.lastPage = 0;  
68
                }  
69
            }  
70
            for (var a = this.pageNumberShow - 1; a >= 0; a--) {  
71
                this.pageField[a] = this.temppage;  
72
                this.temppage = this.temppage - 1;  
73
            }  
74
            if (this.temppage == 0) {  
75
                this.showPageOnlyOntabsChange = false;  
76
            }  
77
            this.currentPage = this.pageField[0];  
78
        }  
79
    }  
80
  
81
    nextCompanies() {  
82
  
83
        if (this.disabledNextBtn == false) {  
84
            this.disabledPrevBtn = false;  
85
            this.pageField = [];  
86
            this.prevtrue = true;  
87
            this.showNoOfCurrentPage = this.showNoOfCurrentPage + 1;  
88
            this.pageNumber[0] = true;  
89
            if (this.nexttrue) {  
90
                this.temppage = this.temppage + 10;  
91
                this.nexttrue = false;  
92
            }  
93
            for (var a = 0; a < this.pageNumberShow; a++) {  
94
                this.pageField[a] = this.temppage + 1;  
95
                this.temppage = this.temppage + 1;  
96
                if (this.exactPageList == this.pageField[a]) {  
97
                    this.lastPage = this.pageField[a];  
98
                    this.lastPage = this.lastPage - (a + 1);  
99
                    for (var b = 0; b < this.pageNumberShow - 7; b++) {  
100
                        if (a == b) {  
101
                            this.temppage = this.temppage - (b + 1);  
102
  
103
                            //this.prevtrue = false;  
104
                            break;  
105
                        }  
106
                    }  
107
                    this.disabledNextBtn = true;  
108
                    break;  
109
                } else {  
110
                    this.disabledNextBtn = false;  
111
                }  
112
            }  
113
            this.currentPage = this.pageField[0];  
114
        }  
115
    }  
116
  
117
}  


With the above steps our coding is done, so now it's time to check the output by using the command  ng serve -o .

Here in these images, we can see that total number of records are 60, but we are displaying only 5 records per page with 12 page buttons total.

Here is how the logic works:

Page 1

Page 1


Page 7

Page 7


 Page 2

Page 2


Conclusion

In this article, I have tried to explain how to display the selected number of records per page and next  and previous buttons using server-side pagination in Angular 8 and the ASP.NET Web API.

This is part 2 of server-side pagination. In my next article of this series, we will learn how to fetch data by clicking on the header and display it in paging. 

Further Reading

Why Most Programmers Get Pagination Wrong

Pagination in Spring Boot Applications

Topics:
angular ,webapi ,sql ,pagination ,web dev ,asp.net core ,angular 8

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}