Reputation: 1227
I have a simple html table in which I am showing data by ngFor directive. What I am trying to look for is to add pagination but I am not sure how can I bind this pagination with a table.
My code
<div class="table-responsive">
<table id="recent-orders" class="table table-hover table-xl mb-0">
<thead>
<tr>
<th class="border-top-0">Status</th>
<th class="border-top-0">Invoice#</th>
<th class="border-top-0">Customer Name</th>
<th class="border-top-0">Categories</th>
<th class="border-top-0">Shipping</th>
<th class="border-top-0">Amount</th>
<th class="border-top-0">Action</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let x of data">
<td class="text-truncate"><i class="fa fa-dot-circle-o success font-medium-1 mr-1"></i> Paid</td>
<td class="text-truncate"><a href="#">{{ x.invoice }}</a></td>
<td class="text-truncate">
<span>{{ x.name }}</span>
</td>
<td>
<button type="button" class="btn btn-sm btn-outline-danger round">{{ x.Category }}</button>
</td>
<td>
<ngb-progressbar type="danger" [value]="25" [striped]="true" class="progress-bar-md bg-gradient-x-danger"></ngb-progressbar>
</td>
<td class="text-truncate">$ {{ x.price }}</td>
<td>
<a class="success p-0" data-original-title="" title="">
<i class="fa fa-pencil font-medium-3 mr-2"></i>
</a>
<a class="info p-0" data-original-title="" title="">
<i class="fa fa-check font-medium-3 mr-2"></i>
</a>
<a class="danger p-0" data-original-title="" title="">
<i class="fa fa-trash-o font-medium-3 mr-2"></i>
</a>
</td>
</tr>
</tbody>
</table>
<ngb-pagination [collectionSize]="10" [pageSize]="2" [maxSize]="7" [rotate]="true" ></ngb-pagination>
You can see I have just added ngb-pagination add but is not functional I just added it for UI purpose so it can show now I need to know how can I make it functional
Upvotes: 1
Views: 159
Reputation: 4993
subscribe to ngb-pagination
's pageChange
event and instead of looping through all the element of the data
array loop only through selected page.
Example: https://www.codegrepper.com/code-examples/typescript/pagination+using+ngb-pagination+example
Upvotes: 1