pager.component.html
2.76 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
<div class="row">
<div class="col-md-4 col-sm-3">
<div class="form-inline marginTop20">
<div class="form-group">
<label for="PerPage">Item's Per Page</label>
<select class="form-control input-sm" id="PerPage" (change)="PageLengthChange($event.target)">
<option [selected]="10 == pageLength">10</option>
<option [selected]="25 == pageLength">25</option>
<option [selected]="50 == pageLength">50</option>
<option [selected]="100 == pageLength">100</option>
</select>
</div>
</div>
</div>
<div class="col-md-5 col-sm-5">
<nav aria-label="...">
<ul class="pagination pagination-sm margin-btm0" (click)="PageNumberChange($event.target)">
<li [ngClass]="(pageShowList[0] == 1 ? 'disabled' : '')">
<a href="javascript:void(0);" aria-label="Prev">
<span aria-hidden="true">« Prev</span>
</a>
</li>
<li [ngClass]="(pageNo == 1 ? 'disabled' : '')">
<a href="javascript:void(0);" aria-label="Prev">
<span aria-hidden="true"><</span>
</a>
</li>
<li *ngFor="let item of pageShowList" [ngClass]="[ pageNo == item ? 'active' : 'inactive', item > totalPages ? 'disabled' : '' ]">
<a href="javascript:void(0);">{{item}}</a>
</li>
<li [ngClass]="(pageNo >= totalPages ? 'disabled' : '')">
<a href="javascript:void(0);" aria-label="Next">
<span aria-hidden="true">></span>
</a>
</li>
<li [ngClass]="(pageShowList[11] >= totalPages ? 'disabled' : '')">
<a href="javascript:void(0);" aria-label="Next">
<span aria-hidden="true">Next »</span>
</a>
</li>
</ul>
</nav>
</div>
<div class="col-md-3 col-sm-4">
<div class="form-inline marginTop20">
<div class="form-group">
<label for="Page">
<span class="font-normal marginR10">
Results:
{{((pageNo - 1) * pageLength) + 1}} - {{((pageNo * pageLength) > recordCount) ? recordCount : (pageNo * pageLength)}} of
{{recordCount}}
</span> Page
</label>
<select class="form-control input-sm" id="selectPage" (change)="PageNumberChange($event.target.value)">
<option *ngFor="let item of pageList" [selected]="item == pageNo" [value]="item" >{{item}}</option>
</select>
</div>
</div>
</div>
</div>