Primefaces DataTable in Second tab not displaying data - jsf

Question

I have a primefaces page containing 2 tabs. Both tabs has its own data Table. When finish querying data, dataTable in the first tab displays queried data fine but the second tab does not (please refer to the picture.)
here is my xhtml file code
<code>
<h:body>`enter code here`
<h:form id="myForm">
<p:menubar>
<p:menuitem value="Logout" icon="ui-icon-close" ajax="false" immediate="true" action="#{logoutManagedBean.logout}" />
</p:menubar>
<p:growl id="growlExtractTimesheet" sticky="false" showDetail="true" life="3000" />
<h:panelGrid style="margin-top:20px; border:none; border-style: none; border-width: 0px;" columns="7" >
<p:outputLabel for="fromDateCalendar" value=' From ' />
<p:calendar id='fromDateCalendar'
value="#{dataProcessingManagedBean.fromDate}"
binding="#{dataProcessingManagedBean.fromDateCalendar}"
pattern="dd-MMM-yyyy"
required="true"
requiredMessage="From Date Required"
valueChangeListener="#{dataProcessingManagedBean.determineExtractButtonDisability}" >
<p:ajax event="dateSelect" partialSubmit="fromDateCalendar" update="extractTimesheetButton" />
</p:calendar>
<p:outputLabel for="toDateCalendar" value='To ' />
<p:calendar id='toDateCalendar'
value="#{dataProcessingManagedBean.toDate}"
binding="#{dataProcessingManagedBean.toDateCalendar}"
pattern="dd-MMM-yyyy"
required="true"
requiredMessage="To Date Required"
valueChangeListener="#{dataProcessingManagedBean.determineExtractButtonDisability}" >
<p:ajax event="dateSelect" partialSubmit="toDateCalendar" update="extractTimesheetButton" />
</p:calendar>
<p:commandButton id='extractTimesheetButton'
actionListener ="#{dataProcessingManagedBean.extractTimesheetData}"
binding ="#{dataProcessingManagedBean.extractTimesheetCommandButton}"
update='myForm:tabview:detailDataTable myForm:tabview:summaryDataTable myForm:downloadExcelsButton'
ajax="true" icon="ui-icon-calculator" >
</p:commandButton>
<p:commandButton id="downloadExcelsButton" ajax="false" actionListener="#{dataProcessingManagedBean.downloadExcelFile}"
binding="#{dataProcessingManagedBean.downloadExcelsCommandButton}" icon="ui-icon-arrowthick-1-s" disabled="true"/>
</h:panelGrid>
<p:tabView id='tabview' cache="false">
<p:tab title="Detail Data" id='detailTab'>
<p:dataTable id='detailDataTable' var="detailData" paginatorPosition="top"
value="#{dataProcessingManagedBean.detailDatas}" paginator="true"
rows="100" rowsPerPageTemplate="100,200,500,1000, 2000, 5000, 10000, 20000, 50000" lazy='true'
currentPageReportTemplate="Showing {startRecord}-{endRecord} out of {totalRecords}"
paginatorTemplate="{CurrentPageReport} {RowsPerPageDropdown} {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} "
scrollable="true" scrollHeight="350"
liveResize="true" draggableColumns="true" resizableColumns="true"
selectionMode="multiple" selection="#{dataProcessingManagedBean.selectedDetailDatas}" rowKey="#{detailData.id}" >
<p:column headerText="Employee ID" width="80">
<h:outputText value="#{detailData.employeeId}" />
</p:column>
<p:column headerText="Employee Name Lastname" width="200">
<h:outputText value="#{detailData.employeeName}" />
</p:column>
<p:column headerText="Cost Center" width="100">
<h:outputText value="#{detailData.costCenter}" />
</p:column>
<p:column headerText="WBS Code" width="100">
<h:outputText value="#{detailData.wbsCode}" />
</p:column>
<p:column headerText="WBS Name" width="300">
<h:outputText value="#{detailData.wbsName}" />
</p:column>
<p:column headerText="Project Code" width="100">
<h:outputText value="#{detailData.projectCode}" />
</p:column>
<p:column headerText="Project Name" width="300">
<h:outputText value="#{detailData.projectName}" />
</p:column>
<p:column headerText="Activity" width="300">
<h:outputText value="#{detailData.activity}" />
</p:column>
<p:column headerText="Task" width="300">
<h:outputText value="#{detailData.task}" />
</p:column>
<p:column headerText="Role" width="150">
<h:outputText value="#{detailData.role}" />
</p:column>
<p:column headerText="Timesheet Date" width="100">
<h:outputText value="#{detailData.timesheetDate}" />
</p:column>
<p:column headerText="Total Working Hours" width="150">
<h:outputText value="#{detailData.totalWorkingHours}" />
</p:column>
<p:column headerText="Utilized" width="50">
<h:outputText value="#{detailData.utilized}" />
</p:column>
<p:column headerText="Billable" width="50">
<h:outputText value="#{detailData.billable}" />
</p:column>
<p:column headerText="OT" width="50">
<h:outputText value="#{detailData.ot}" />
</p:column>
<p:column headerText="On Time" width="80">
<h:outputText value="#{detailData.onTime}" />
</p:column>
<p:column headerText="Status" width="80">
<h:outputText value="#{detailData.status}" />
</p:column>
<p:column headerText="Remark" width="500">
<h:outputText value="#{detailData.remark}" />
</p:column>
</p:dataTable>
</p:tab>
<p:tab title="Summary Data" id='summaryTab'>
<p:dataTable id='summaryDataTable' var="summaryData" paginatorPosition="top"
value="#{dataProcessingManagedBean.summaryDatas}" paginator="true"
rows="50" rowsPerPageTemplate="50, 100, 200" lazy='true'
currentPageReportTemplate="Showing {startRecord}-{endRecord} out of {totalRecords}"
paginatorTemplate="{CurrentPageReport} {RowsPerPageDropdown} {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} "
scrollable="true" scrollHeight="350"
liveResize="true" draggableColumns="true" resizableColumns="true"
selectionMode="multiple" selection="#{dataProcessingManagedBean.selectedSummaryDatas}" rowKey="#{summaryData.id}" >
<p:column headerText="Employee ID" width="80">
<h:outputText value="#{summaryData.employeeId}" />
</p:column>
<p:column headerText="Employee Name Lastname" width="200">
<h:outputText value="#{summaryData.employeeName}" />
</p:column>
<p:column headerText="Normal Billable hour(s)" width="100">
<h:outputText value="#{summaryData.normalBillableHours}" />
</p:column>
<p:column headerText="Normal Non-Billable hour(s)" width="100">
<h:outputText value="#{summaryData.normalNonBillableHours}" />
</p:column>
<p:column headerText="Total Normal hours(s)" width="100">
<h:outputText value="#{summaryData.totalNormalHours}" />
</p:column>
<p:column headerText="OT Billable hour(s)" width="100">
<h:outputText value="#{summaryData.otBillableHours}" />
</p:column>
<p:column headerText="OT Non-Billable hour(s)" width="100">
<h:outputText value="#{summaryData.otNonBillableHours}" />
</p:column>
<p:column headerText="Total OT hour(s)" width="100">
<h:outputText value="#{summaryData.totalOTHours}" />
</p:column>
<p:column headerText="Total hour(s)" width="100">
<h:outputText value="#{summaryData.totalHours}" />
</p:column>
</p:dataTable>
</p:tab>
</p:tabView>
<p:ajaxStatus onstart="PF('statusDialog').show()" onsuccess="PF('statusDialog').hide()" onerror="PF('statusDialog').hide()"/>
<p:dialog id="waitDialog" widgetVar="statusDialog" modal="true" draggable="false" closable="false" resizable="false" showHeader="false">
<p:graphicImage value="/images/ajax_wait.gif" />
</p:dialog>
</h:form>
</h:body>
</html>
and this is the result.
if anyone has come across this problem and solved it. please help Thank you.

Answer 1

I think I have solved the problem by putting attribute dynamic='true' for tabView component.