首页 > 解决方案 > TurboTable 标题复选框选择所有页面中的所有数据,而不仅仅是当前页面

问题描述

我正在使用带有 primeNG 版本 5.2.2 的 turboTable,

在我使用的以前版本中,selectAll 复选框仅选择了当前页面(想要的行为)

现在有了这个版本,selectAll 复选框选择所有页面中的所有数据,

请问有没有办法解决这个问题?

我的html代码:

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

标签: javascripthtmlangularprimengprimeng-turbotable

解决方案


这是预期的行为,如果您使用惰性,那么您想要的就会发生。这一切的发生是因为在惰性中你只加载了当前页面,而在非惰性中你所有的项目都在屏幕下分页。


推荐阅读