0

I have used a tabview with 2 tabPanels each containg a datatable. Consider, Tab 1 datatable has 100 rows with a page displaying only 10 rows and tab 2 has a datatable with only 3 rows of data and no pagination (data is lazy loaded).

Now, if I click on page 3 of the of datatable in Tab1, data loads as required. But, if I now click on tab 2, automatically, event.first is set at page 3 even tho the datatable should refresh.

I am using lazy loading in my grids, and in my tabPanel. I have also set [cache]="false" in the tabPanel.

How do i get the datatable to reset on every tab click?

<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>
Sociopath
  • 13,068
  • 19
  • 47
  • 75
K G
  • 1

1 Answers1

0

Solution: I had used the same variable to assign the [(first)] property of datatable. [(first)]="first".

Use different variables on both datatable

K G
  • 1