I am currently working on incorporating a data table layout with pagination that includes checkbox selection for the data. I have encountered an issue where I can select data on one page, but when I navigate to another page and select different data, the selection from the first page is lost.
Here is a snippet of the code:
<p-dataTable [value]="cars" [rows]="10" [paginator]="true" [pageLinks]="3" [rowsPerPageOptions]="[5,10,20]" sortMode="multiple" [(selection)]="selectedCars2">
<p-column [style]="{'width':'38px'}" selectionMode="multiple" ></p-column>
<p-column field="vin" header="Vin"></p-column>
<p-column field="year" header="Year"></p-column>
<p-column field="brand" header="Brand"></p-column>
<p-column field="color" header="Color">
<template let-col let-car="rowData" pTemplate type="body">
<span [style.color]="car[col.field]">{{car[col.field]}}</span>
</template>
</p-column>
<!--<p-column styleClass="col-button">
<template pTemplate type="header">
<input type="checkbox" [(ngModel)]="checkUncheckAll" />
</template>
<template let-car="rowData" pTemplate type="body">
<input type="checkbox" [(ngModel)]="checkValue[car.vin]" (click)="selectCar(car, checkValue[car.vin])"/>
</template>
</p-column>-->
</p-dataTable>
<div class="table-controls-top"><div class="pager"><input type="button" class="button_tablecontrol" (click)="selectCar(selectedCars2)" value="Delete"></div></div>
Additionally, here is an excerpt from the TypeScript file:
import {Component, OnInit} from '@angular/core';
import {Car} from '../domain/car';
import {CarService} from '../service/carservice';
import {Message} from '../common/api';
@Component({
templateUrl: 'app/showcase/demo/datatable/datatabledemo.html'
})
export class DataTableDemo implements OnInit {
cars: Car[];
cols: any[];
msgs: Message[] = [];
checkValue: any;
selectedCars2: any[];
// Constructor
constructor(private carService: CarService) {
this.checkValue = {};
this.selectedCars2 = [];
}
// Initialization method
ngOnInit() {
this.carService.getCarsCustom().then(
cars => {
this.cars = cars;
for(var car of this.cars) {
console.log(car.vin)
this.checkValue[car.vin] = false;
}
});
this.cols = [
{field: 'vin', header: 'Vin'},
{field: 'year', header: 'Year'},
{field: 'brand', header: 'Brand'},
{field: 'color', header: 'Color'}
];
}
selectCar(selectedCars) {
console.log(selectedCars)
console.log(this.selectedCars2)
}
}
https://i.stack.imgur.com/TUkdV.png
It appears that the team has not yet implemented the functionality needed to retain row selections ('selectedCars2') with pagination. Any suggestions or insights on how to address this issue would be greatly appreciated.
Thank you in advance.