primeng多个标签数据表分页不令人耳目一新

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了primeng多个标签数据表分页不令人耳目一新相关的知识,希望对你有一定的参考价值。

我使用了一个带有2个tabPanels的tabview,每个都有一个数据表。考虑一下,Tab 1数据表有100行,页面只显示10行,tab 2有一个数据表,只有3行数据,没有分页(数据是延迟加载的)。

现在,如果我在Tab1中单击datatable的第3页,则会根据需要加载数据。但是,如果我现在自动点击选项卡2,则event.first设置在第3页,即使datatable应该刷新。

我正在我的网格和我的tabPanel中使用延迟加载。我还在[cache]="false"设置了tabPanel

如何在每次单击选项卡上重置数据表?

<p-tabView>
                <p-tabPanel header="Work Queue" [cache]="false">
                    <ng-template pTemplate="content">
                        <p>
                            <p-dataTable selectionMode="single" (onRowSelect)="onRowSelect($event)" [(selection)]="selecteditemWQ" [value]="searchDocResults"
                                         [rows]="10" [paginator]="true" [(first)]="first"
                                         [lazy]="true" (onLazyLoad)="loadData($event)" [totalRecords]="totalRecordsCount"
                                         scrollHeight="5px" [loading]="loading" emptyMessage="No Records Found." rowHover="true">
                                <p-column field="DocumentName" header="Document Name" styleClass="wordbreak"
                                          [style]="{'width':'200px','overflow':'visible'}"
                                          [sortable]="true" [filter]="true" filterMatchMode="contains">
                                </p-column> 

                            </p-dataTable>
                        </p>
                    </ng-template>
                </p-tabPanel>

                <p-tabPanel header="My Documents" [cache]="false">
                    <ng-template pTemplate="myDocs">
                        <p>
                            <p-dataTable [value]="searchUserDocResults" [rows]="10" [paginator]="true" [(first)]="first"
                                         [lazy]="true" (onLazyLoad)="loadDataMyDocs($event)" [totalRecords]="totalRecordsCount"
                                         scrollHeight="5px" [loading]="loading" emptyMessage="No Records Found." rowHover="true"
                                         selectionMode="single" (onRowSelect)="onRowSelect($event)" [(selection)]="selecteditemWQ">

                                <p-column field="DocumentNumber" header="Document Number" styleClass="wordbreak"
                                          [style]="{'width':'150px','overflow':'visible'}" [sortable]="true" [filter]="true"
                                          filterMatchMode="contains">
                                </p-column>

                            </p-dataTable>
                        </p>
                    </ng-template>
                </p-tabPanel>
            </p-tabView>
答案

解决方案:我使用了相同的变量来分配datatable的[(first)]属性。 [(第一)] = “第一”。

在两个数据表上使用不同的变量

以上是关于primeng多个标签数据表分页不令人耳目一新的主要内容,如果未能解决你的问题,请参考以下文章

p:数据表分页不起作用

jquery数据表分页不起作用

jquery数据表服务器端分页不起作用

使用服务器端时搜索和分页不起作用

Kendo UI Grid 上的分页不起作用

kaminari ajax 分页不更新分页