I am currently working on incorporating the ng2-bootstrap pagination component with a bootstrap table.
The bootstrap table I have is populated using the ngFor directive:
<tr>
<th *ngFor="#col of cols">{{col.header}}
</tr>
</thead>
<tbody>
<tr *ngFor="#row of rows">
<td *ngFor="#col of cols">{{row[col.field]}}</td>
</tr>
</tbody>
The contents of rows are determined by the pagination component:
I have an array named data that contains multiple entries for the table. The length of the array determines the totalItems displayed in the pagination component:
<pagination class="pagination-sm"
[(ngModel)]="page"
[totalItems]="data.length"
[itemsPerPage]="itemsPerPage"
[maxSize]="maxSize"
[boundaryLinks]="true"
(pageChanged)="onPageChange($event)">
</pagination>
The variable rows in the table only displays the entries from the current page. This is achieved through utilizing the pageChange event provided by the pagination component:
onPageChange(page:any) {
let start = (page.page - 1) * page.itemsPerPage;
let end = page.itemsPerPage > -1 ? (start + page.itemsPerPage) : this.data.length;
this.rows = this.data.slice(start, end);
}
Everything seems to be working fine...
However, when entries are removed from the data array while the pagination bar is on the last page, the following error message appears in the console:
Expression 'rows in App@9:8' has changed after it was checked.You can experiment with a live example here:
http://plnkr.co/edit/5zxamBiWISBpEmXYP5UK?p=preview
Simply click the last button and then cut data.
Any suggestions or advice?