STEP 1: Create service with the help of the following command.
STEP 2: Copy and paste the following code 'PaginationService'.
import { Injectable } from '@angular/core';
@Injectable({
providedIn: 'root'
})
export class PaginationService {
constructor() { }
getPager(totalItems: number, currentPage: number = 1, pageSize: number = 10) {
// calculate total pages
const totalPages = Math.ceil(totalItems / pageSize);
// ensure current page isn't out of range
if (currentPage < 1) {
currentPage = 1;
} else if (currentPage > totalPages) {
currentPage = totalPages;
}
let startPage: number, endPage: number;
if (totalPages <= 10) {
// less than 10 total pages so show all
startPage = 1;
endPage = totalPages;
} else {
// more than 10 total pages so calculate start and end pages
if (currentPage <= 6) {
startPage = 1;
endPage = 10;
} else if (currentPage + 4 >= totalPages) {
startPage = totalPages - 9;
endPage = totalPages;
} else {
startPage = currentPage - 5;
endPage = currentPage + 4;
}
}
// calculate start and end item indexes
const startIndex = (currentPage - 1) * pageSize;
const endIndex = Math.min(startIndex + pageSize - 1, totalItems - 1);
// create an array of pages to ng-repeat in the pager control
const pages = Array.from(Array((endPage + 1) - startPage).keys()).map(i => startPage + i);
// return object with all pager properties required by the view
return {
totalItems: totalItems,
currentPage: currentPage,
pageSize: pageSize,
totalPages: totalPages,
startPage: startPage,
endPage: endPage,
startIndex: startIndex,
endIndex: endIndex,
pages: pages
};
}
}
Step 3: Copy and paste the following code on your .ts file.
import { Component, OnInit, Pipe, TemplateRef } from '@angular/core';
import { ApplicantService } from '../applicant.service';
import { PaginationService } from '../pagination.service';
//import { LocalStorageService } from '../local-storage.service';
@Pipe({ name: 'phoneFormat' })
@Component({
selector: 'app-home',
templateUrl: './home.component.html',
styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {
JFParticipant: any[];
JFApplicantID: number | string;
JobFairID: number | string = 1;
public PageIndex = 1;
public PageCount = 2;
totalCount: number = 0;
// pager object
pager: any = {};
public isStatus: boolean;
// paged items
pagedLstSection: any[];
currentPageIndex: number = 0;
//Ordr by
sortExpression: string = "FirstName";
sortOrder: string = "ASC";
order: string = 'FirstName';
reverse: boolean = false;
AppDetails: any;
constructor(
private _applicantService: ApplicantService,
private pagingService: PaginationService,
//private _LocalStorage: LocalStorageService
)
{ }
ngOnInit() {
this.onSearch(0);
}
setOrder(value: string) {
debugger;
let column = this.order.replace('-', '');
if (column === value) {
if (this.reverse) {
this.sortOrder = 'ASC';
}
else {
this.sortOrder = 'DESC';
}
this.reverse = !this.reverse;
}
else {
this.reverse = false;
this.sortOrder = 'ASC';
}
this.order = value;
this.sortExpression = value;
debugger;
this.onSearch(0);
debugger;
}
onSearch(_pageIndex: number = 0) {
debugger;
let ApplicantObj = {
jobFairID: this.JobFairID,
PageIndex: _pageIndex,
PageCount: this.PageCount,
sortCol: this.sortExpression,
sortOrder: this.sortOrder,
}
this._applicantService.GetJobFairApplicant(ApplicantObj)
.subscribe(e => {
this.AppDetails = e['table'];
this.totalCount = e['table1'][0].totalCount;
debugger;
if (_pageIndex == 0) {
this.setPage(1);
}
});
}
///////////paging function/////////////
setPage(page: number) {
debugger;
this.pager = this.pagingService.getPager(this.totalCount, page, this.PageCount);
this.currentPageIndex = (this.pager.currentPage - 1) * (this.PageCount);
}
setNextPage(page: number) {
debugger;
//If you want to maintain page state after page load, you have to store the page index in local storage and pass the value to setPage() function.
//this._LocalStorage.storeOnLocalStorage("pageIndex", page.toString());
this.pager = this.pagingService.getPager(this.totalCount, page, this.PageCount);
this.currentPageIndex = (this.pager.currentPage - 1) * (this.PageCount);
this.onSearch(page - 1);
}
}
Step 4: Copy and paste the following code on your .html file.
<div class="container">
<div class="col-md-12" style="margin:0 auto">
<p> </p>
<div class="col-md-5 text-left">
<b> Total: {{totalCount}}</b>
</div>
<div class="col-md-5"> </div>
<div class="table-responsive">
<table class="table table-bordered">
<thead>
<tr>
<th scope="col">#</th>
<th [class.active]="order ==='FirstName' || order ==='-FirstName'" (click)="setOrder('FirstName')">
First Name
<i [hidden]="order ==='FirstName' || order ==='-FirstName'">▼</i>
<span [hidden]="reverse">▼</span>
<span [hidden]="!reverse">▲</span>
</th>
<th [class.active]="order ==='LastName' || order ==='-LastName'" (click)="setOrder('LastName')">
Last Name
<i [hidden]="order ==='LastName' || order ==='-LastName'">▼</i>
<span [hidden]="reverse">▼</span>
<span [hidden]="!reverse">▲</span>
</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let lst of AppDetails; let myIndex = index">
<th scope="row">{{currentPageIndex + (myIndex + 1)}}</th>
<td>{{lst.firstName}}</td>
<td>{{lst.lastName}}</td>
</tr>
</tbody>
</table>
</div>
<!-- Pagination for table -->
<div class="pt-3" *ngIf="AppDetails?.length != 0">
<nav aria-label="...">
<ul class="pagination">
<li class="page-item disabled" [ngClass]="{disabled:pager.currentPage === 1}">
<a class="page-link" (click)="setNextPage(1)">First</a>
</li>
<li class="page-item disabled " [ngClass]="{disabled:pager.currentPage === 1}">
<a class="page-link" (click)="setNextPage(pager.currentPage - 1)">Previous</a>
</li>
<li class="page-item " *ngFor="let page of pager.pages"
[ngClass]="{active:pager.currentPage === page}">
<a class="page-link" (click)="setNextPage(page)">{{page}}</a>
</li>
<li class="page-item disabled" [ngClass]="{disabled:pager.currentPage === pager.totalPages}">
<a class="page-link" (click)="setNextPage(pager.currentPage + 1)">Next</a>
</li>
<li class="page-item disabled" [ngClass]="{disabled:pager.currentPage === pager.totalPages}">
<a class="page-link" (click)="setNextPage(pager.totalPages)">Last</a>
</li>
</ul>
<div class="clearfix"></div>
</nav>
</div>
</div>
</div>
Step 5: Copy and paste the following code on your .css file.
.custom-error
{
color: #ff0000;
font-size: 11px;
}
.error {
color: #ff0000;
font-size: 11px;
}
thead th
{
cursor: pointer;
margin-right: 15px;
margin-left:15px;
}
thead th span {
display: none;
}
thead th a span
{
display: none;
}
thead th.active
{
color: #000;
}
thead th.active
span {
display: inline-block;
}
thead th.active
a.active span
{
display: inline-block;
}
.fa-info-circle{
margin-right: 7px;
}
====================Procedure format ==========================
ALTER PROC [dbo].[p_GetApplicant] (
@ID INT = 1
,@PageIndex INT = 0
,@PageCount INT = 10
,@sortCol VARCHAR(50) = NULL
,@SortOrder VARCHAR(50) = NULL
,@FirstName NVARCHAR(200) = null
,@LastName NVARCHAR(200) = NULL
)
AS
DECLARE @StartRowIndex INT
DECLARE @EndRowIndex INT
SET @StartRowIndex = (@PageIndex * @PageCount) + 1
SET @EndRowIndex = ((@PageIndex + 1) * @PageCount);
SELECT *
FROM (
SELECT
CASE @sortCol
WHEN 'FirstNameASC'
THEN ROW_NUMBER() OVER (
ORDER BY ltrim(LTRIM(FirstName)) ASC
)
WHEN 'FirstNameDESC'
THEN ROW_NUMBER() OVER (
ORDER BY ltrim(LTRIM(FirstName)) DESC
)
WHEN 'LastNameASC'
THEN ROW_NUMBER() OVER (
ORDER BY ltrim(LTRIM(LastName)) ASC
)
WHEN 'LastNameDESC'
THEN ROW_NUMBER() OVER (
ORDER BY ltrim(LTRIM(LastName)) DESC
)
END AS RowNumber
,[FirstName]
,[LastName]
FROM [Applicant]
WHERE ID = @ID
) AS TAB
WHERE RowNumber >= + CAST(@StartRowIndex AS NVARCHAR(5))
AND RowNumber <= + CAST(@EndRowIndex AS NVARCHAR(5))
ORDER BY RowNumber ASC;
-----------------------------------------------------------------------------------------------
SELECT COUNT(ID) AS TotalCount
FROM [Applicant]
WHERE ID = @ID
No comments:
Post a Comment