具有分页功能的PrimeNG数据表复选框选择

Question

I'm trying to bring a data table layout with pagination that has checkbox selection for data in it. I'm able to select a page's data and when I move to another page, and select different set of data, the first page selection is lost.

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

}

I suppose the team hasn't implemented the functionality yet. Any idea/insights on how to retain the selection of rows (in model 'selectedCars2') with pagination?

Thanks in advance.

Answer 1

The problem is discussed on github:

DataTable selection with pagination

To help you now:

HTML:

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

TS:

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