I need to implement a feature where row elements can be deleted by enabling checkboxes on the rows and clicking the Delete button. Although I am able to successfully delete items from the table upon clicking the Delete button, I am facing challenges in updating the Prev and Next links according to the page numbers.
Scenario:
Row Id Row Value
1 Row1
2 Row2
3 Row3
Showing 1-3 of 9 Next //Since it is Page Number 1
Row Id Row Value
4 Row4
5 Row5
6 Row6
Showing 4-6 of 9 Prev Next // Since it is Page Number 2
Row Id Row Value
7 Row7
8 Row8
9 Row9
Showing 7-9 of 9 Prev // Since it is the last page, Next link is disabled.
I'm aiming for a scenario where if the user selects and deletes 7, 8, 9, then
It should display
Row Id Row Value
4 Row4
5 Row5
6 Row6
Showing 4-6 of 6 Prev
Html
<button type = "button" (click)="deleteSelectedItems()">Delete Items</button>
<table>
<thead>
<th>Row Id</th>
<th>Row Value</th>
</thead>
<tbody>
<tr *ngFor = "let row of paginatedMessages; let i = index;">
<td><input type="checkbox" [(ngModel)] = "row.isSelected" (change) = "onCheck($event, row.id, i)" /></td>
<td>{{row?.id}}</td>
<td>{{row?.rowValue}}</td>
</tr>
</tbody>
</table>
<span>
{{paginatedString}}
<a class = "link" (click) = "showPrevItems()" *ngIf = "showPreviousBtn">Prev</a>
<a class = "link" (click) = "showNextItems()" *ngIf = "showNextBtn">Next</a>
</span>
ts
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-pagination-example',
templateUrl: './pagination-example.component.html',
styleUrls: ['./pagination-example.component.scss']
})
export class PaginationExampleComponent implements OnInit {
...Remaining TypeScript code...
This issue arises when deleting elements on the last page, causing incorrect updates to the start and end values.
Result:
Row Id Row Value
Showing 16 - 15 of 15 Prev
If anyone could assist in resolving the problem with updating the Prev and Next links after deleting items, it would be greatly appreciated.
Demo available at StackBlitz
Thank you in advance!