angular bootstrap分页 pagination
https://www.cnblogs.com/sulishibaobei/p/7413808.html
https://ng-bootstrap.github.io/#/components/pagination/overview
1 <div class='container tl_body'> 2 <div class="row"> 3 <!--body head--> 4 <div class='col-12 t_info_title'> 5 Sales List 6 </div> 7 <!--body search dates--> 8 <div class="col-12"> 9 <div *ngIf="searchbar == true" style="width:31%; float: left;"> 10 <div class='t_info_search_bar'> 11 <input class="form-control" id='searchingInput' type="text" style="height: 30px;" placeholder="Search..." 12 (keydown)='onSearch($event)'> 13 </div> 14 <div class='t_info_search_icon'> 15 <span (click)="onSearch(null)"> 16 <i class='fas fa-search'></i> 17 </span> 18 </div> 19 </div> 20 <div style="width:69%; float: right;"> 21 <form style="float:right;" [formGroup]='searchForm'> 22 <span> 23 <p class="label_p">Select a period of date:</p> 24 </span> 25 <div class="input-group input_datebar"> 26 <input class="form-control" style="height: 30px;" placeholder="yyyy-mm-dd" ngbDatepicker 27 #begindate="ngbDatepicker" formControlName="BeginDate" (dateSelect)="onBeginDateSelection($event)"> 28 <div class="input-group-append"> 29 <button class="btn btn-outline-secondary calendar" style="height: 30px; line-height: 0;" 30 (click)="begindate.toggle()" type="button"> 31 <i class="far fa-calendar-alt"></i> 32 </button> 33 </div> 34 </div> 35 <span> 36 <p class="label_p">To</p> 37 </span> 38 <div class="input-group input_datebar"> 39 <input class="form-control" style="height: 30px;" placeholder="yyyy-mm-dd" ngbDatepicker 40 #enddate="ngbDatepicker" formControlName="EndDate" (dateSelect)="onEndDateSelection($event)"> 41 <div class="input-group-append"> 42 <button class="btn btn-outline-secondary calendar" style="height: 30px; line-height: 0;" 43 (click)="enddate.toggle()" type="button"> 44 <i class="far fa-calendar-alt"></i> 45 </button> 46 </div> 47 </div> 48 <!--add more btn--> 49 <button type="button" class='btn btn-info t_info_addmore_btn' (click)="onSubmit()"> 50 <i class='fas fa-search'></i>Search 51 </button> 52 </form> 53 </div> 54 </div> 55 <!--info page table--> 56 <div *ngIf='loadingFlag' class="loaderLarge"></div> 57 <div *ngIf='!loadingFlag' class='t_mf_form'> 58 <div class='col-12'> 59 <table class='table table-striped' style="text-align: center;"> 60 <thead> 61 <tr> 62 <th scope='col' class='tl_body_table_head' style="width:2rem;">#</th> 63 64 65 <th scope='col' class='tl_body_table_head sorting_item' style="width:18rem" 66 (click)='onSort("ProductName")'> 67 Product Name 68 </th> 69 <!-- <th scope='col' class='tl_body_table_head sorting_item' style="width:17rem" (click)='onSort("StaffName")'> 70 Staff Name 71 </th> --> 72 <th scope='col' class='tl_body_table_head sorting_item' style="width:15rem" (click)='onSort("CreatedAt")'> 73 Created At 74 </th> 75 76 <th scope='col' class='tl_body_table_head sorting_item' style="width:14rem" (click)='onSort("Amount")'> 77 Amt. 78 </th> 79 80 <th scope='col' class='tl_body_table_head sorting_item' style="width:16rem" 81 (click)='onSort("PaymentMethodName")'> 82 Payment Method 83 </th> 84 <!-- <th scope='col' class='tl_body_table_head' style="width:9rem"> 85 Course/Product 86 </th> --> 87 <th scope='col' class='tl_body_table_head sorting_item' style="width:15rem" 88 (click)='onSort("SoldQuantity")'> 89 Sold QTY 90 </th> 91 <!-- <th scope='col' class='tl_body_table_head sorting_item' style="width:8rem" 92 (click)='onSort("IsConfirmed")'> 93 Confirmation 94 </th> --> 95 </tr> 96 </thead> 97 <tbody> 98 <!-- dataTable--> 99 <tr 100 *ngFor='let i of adminSalesList | slice: (page-1)* pageSize : (page-1) * pageSize + pageSize; let j = index'> 101 <th scope="row">{{j+1}}</th> 102 <td> 103 {{i.ProductName}}</td> 104 <!-- <td>{{i.StaffName}}</td> --> 105 <td>{{i.CreatedAt | date:'shortDate'}}</td> 106 <td>${{i.Amount}}</td> 107 108 <td>{{i.PaymentMethodName}}</td> 109 <td>{{i.SoldQuantity}}</td> 110 <!-- Invoice content --> 111 <!-- <td *ngIf="i.LessonQuantity">{{i.CourseName}}</td> 112 <td *ngIf="i.LessonQuantity">{{i.LessonQuantity}}</td> 113 114 <td *ngIf="i.ProductName"> 115 <span class='tl_body_table_btn col-4' style="text-align: center;" (click)="open(0, i)"> 116 <i class="fas fa-receipt"></i> 117 </span> 118 </td> 119 <td *ngIf="i.ProductName">///</td> 120 121 <td *ngIf="!i.LessonQuantity && !i.ProductName">null</td> 122 <td *ngIf="!i.LessonQuantity && !i.ProductName">null</td> --> 123 <!-- Managers confirm paying --> 124 <!-- <td *ngIf="i.IsConfirmed == 0"> 125 <span class='tl_body_table_btn col-4' style="text-align: center;" (click)="open(1, i)"> 126 <i class="fas fa-times" style="color: red;"></i> 127 </span> 128 </td> 129 <td *ngIf="i.IsConfirmed != 0"> 130 <i class="fas fa-check"></i> 131 </td> --> 132 </tr> 133 </tbody> 134 </table> 135 </div> 136 <!--body pagination--> 137 <div class='col-12'> 138 <ngb-pagination [collectionSize]='adminSalesListLength' [(page)]='page' [pageSize]='pageSize'> 139 </ngb-pagination> 140 </div> 141 </div> 142 </div> 143 </div>
