paginate.component.html (3222B)
1 <div class="d-flex flex-column gap-3 p-3 w-100"> 2 <!-- Pagination Controls --> 3 @if (totalPages() > 1) { 4 <div class="btn-toolbar justify-content-center mb-2" role="toolbar" aria-label="Pagination toolbar"> 5 <!-- First & Previous --> 6 <div class="btn-group me-2" role="group" aria-label="Previous navigation"> 7 <button 8 type="button" 9 class="btn btn-outline-primary" 10 [disabled]="!canGoPrevious()" 11 (click)="goToPage(1)" 12 title="First page"> 13 <i class="bi bi-chevron-double-left"></i> 14 </button> 15 16 <button 17 type="button" 18 class="btn btn-outline-primary" 19 [disabled]="!canGoPrevious()" 20 (click)="goToPage(page() - 1)" 21 title="Previous page"> 22 <i class="bi bi-chevron-left"></i> 23 </button> 24 </div> 25 26 <!-- Page Numbers --> 27 <div class="btn-group me-2" role="group" aria-label="Page numbers"> 28 @for (p of getVisiblePages(); track p) { 29 @if (p === '...') { 30 <button type="button" class="btn btn-outline-primary disabled">⋯</button> 31 } @else { 32 <button 33 type="button" 34 class="btn" 35 [class.btn-primary]="(+p) === page()" 36 [class.btn-outline-primary]="(+p) !== page()" 37 (click)="goToPage(+p)"> 38 {{ p }} 39 </button> 40 } 41 } 42 </div> 43 44 <!-- Next & Last --> 45 <div class="btn-group" role="group" aria-label="Next navigation"> 46 <button 47 type="button" 48 class="btn btn-outline-primary" 49 [disabled]="!canGoNext()" 50 (click)="goToPage(page() + 1)" 51 title="Next page"> 52 <i class="bi bi-chevron-right"></i> 53 </button> 54 55 <button 56 type="button" 57 class="btn btn-outline-primary" 58 [disabled]="!canGoNext()" 59 (click)="goToPage(totalPages())" 60 title="Last page"> 61 <i class="bi bi-chevron-double-right"></i> 62 </button> 63 </div> 64 </div> 65 } 66 67 <!-- Results Summary --> 68 <div class="d-flex justify-content-between align-items-center flex-wrap gap-3 pb-2 border-bottom"> 69 <div class="d-flex align-items-center gap-2"> 70 @if (total() > 0) { 71 <small class="text-muted"> 72 Showing 73 <span class="fw-semibold text-dark"> 74 {{ startItem() | number: '1.0-0' }}-{{ endItem() | number: '1.0-0' }} 75 </span> 76 of 77 <span class="fw-semibold text-dark">{{ total() | number: '1.0-0' }}</span> 78 {{ total() === 1 ? 'item' : 'items' }} 79 </small> 80 } @else { 81 <small class="text-danger fw-semibold">No items found</small> 82 } 83 </div> 84 85 <!-- Page Size Selector --> 86 <div class="d-flex align-items-center gap-2"> 87 <label for="pageSize" class="text-muted small mb-0">Show:</label> 88 <select id="pageSize" class="form-select form-select-sm" (change)="onPageSizeChange($event)" style="width: auto"> 89 @for (size of pageSizes; track size) { 90 <option [value]="size" [selected]="size === pageSize()">{{ size }}</option> 91 } 92 </select> 93 </div> 94 </div> 95 </div>