TurboTable标头复选框选择所有页面中的所有数据,而不仅仅是当前页面

时间:2018-10-09 16:44:45

标签: javascript html angular primeng primeng-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>

1 个答案:

答案 0 :(得分:0)

这是预期的行为,如果您使用lazy,那么您想要的将发生。 发生所有这些情况是因为在惰性模式下,您仅加载了当前页面,在非惰性状态下,您在屏幕下方分页了所有项目。