Sélection de case à cocher PrimeNG datable avec pagination

Question

J'essaie d'apporter une mise en page de table de données avec pagination avec une sélection de case à cocher pour les données qu'elle contient. Je suis en mesure de sélectionner les données d'une page et lorsque je passe à une autre page et que je sélectionne un ensemble de données différent, la sélection de la première page est perdue.

demo.html:

<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> 

demo.ts:

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(private carService: CarService) { 

     this.checkValue = {}; 

     this.selectedCars2 = []; 

    } 

    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) 
    } 

} 

Je suppose que l'équipe n'a pas encore mis en œuvre la fonctionnalité. Toute idée/idée sur la façon de conserver la sélection des lignes (dans le modèle 'selectedCars2') avec pagination?

Merci d'avance.

Answer 1

Le problème est discuté sur github:

DataTable selection with pagination

Pour vous aider maintenant:

<p-dataTable [value]="data" [rows]="PageSize" [paginator]="ShowPaginator" [pageLinks]="3" [(selection)]="selectedData" (onHeaderCheckboxToggle)="onTableHeaderCheckboxToggle($event)"> 
    <p-column [style]="{'width':'38px'}" selectionMode="multiple"></p-column> 
    </p-dataTable> 

class Test { 
private data: MyData[]; 
selectedData: MyData[]; 

onTableHeaderCheckboxToggle(event: any) { 
    if (event.checked === true) { 
    for (let m of this.data) { 
     if (/* Make your test here if the array does not contain the element*/) { 
      this.selectedData.push(m); 
     } 
    } 
    } else { 
    this.selectedData.length = 0; 
    } 

}}