turboTable header checkbox selects all data in all pages and not only the current page

UI Components for Angular
Post Reply
JAAFRI Adnane
Posts: 1
Joined: 10 Oct 2018, 16:36

10 Oct 2018, 16:41

I'm using turboTable with primeNG version 5.2.2,

in a previous version I was using, the selectAll checkbox selected only the current page (wanted behaviour )

Now with this version the selectAll checkBox selects all data in all pages,

is there a way to fix this please ?

Code: Select all

<p-table [pageLinks]="10" exportFilename="Boitiers" [totalRecords]="totalRecords" [tableStyleClass]="cats-dataTable" (onHeaderCheckboxToggle)="selectAll($event)" (onRowSelect)="onRowSelect($event)"
            (onRowUnselect)="onRowUnselect($event)" [value]="devices" [columns]="selectedColumns" [paginator]="true" [rows]="10" [rowsPerPageOptions]="[10,20,50,100,200,500]" id="tableDevices" [(selection)]="selectedDevices"
            [emptyMessage]="'pas de resultats'" #dt>
            
            <ng-template pTemplate="caption">
                    <div style="text-align:left">
                        <p-multiSelect [options]="cols" [(ngModel)]="selectedColumns" optionLabel="header"
                                    selectedItemsLabel="{0} {{'catsApp.device.selectedItemsLabel' | translate}}" [style]="{minWidth: '300px'}" defaultLabel="{{'catsApp.device.defaultLabel' | translate}}"></p-multiSelect>
                    </div>
                    <div class="ui-helper-clearfix">
                            <button class="btn btn-danger" type="button" pButton icon="fa fa-file-o" iconPos="left" label="{{'catsApp.device.exportAll' | translate}}" (click)="dt.exportCSV()" style="float:left"></button>
                            <button class="btn btn-danger" type="button" pButton icon="fa fa-file" iconPos="left" label="{{'catsApp.device.exportSelection' | translate}}" (click)="dt.exportCSV({selectionOnly:true})" style="float:right"></button>
                    </div>
            </ng-template>
            <ng-template pTemplate="header" let-columns>
                
                    <tr>
                        <th style="width: 38px">
                                <p-tableHeaderCheckbox></p-tableHeaderCheckbox>
                        </th>
                        <th *ngFor="let col of columns" [pSortableColumn]="col.field">
                            {{col.header}}
                            <p-sortIcon [field]="col.field" ariaLabel="Activate to sort" ariaLabelDesc="Activate to sort in descending order" ariaLabelAsc="Activate to sort in ascending order"></p-sortIcon>
                        </th>
                        <th style="width: 50px">
                            </th>
                            <th style="width: 50px">
                            </th>
                            <th style="width: 50px">
                            </th>
                    </tr>

Post Reply

Return to “PrimeNG”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 13 guests