Primefaces DataTable在第二个选项卡中不显示数据
问题描述:
我有一个包含2个选项卡的primeface页面。这两个选项卡都有自己的数据表。当完成查询数据,在dataTable的第一选项卡显示查询的数据不错,但第二个选项卡不(请参考图片。)
这里是我的XHTML文件的代码Primefaces DataTable在第二个选项卡中不显示数据
<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>
,如果有人碰到过这个问题,并解决它。请帮忙谢谢。
答
我认为我已经通过将tabView组件的属性dynamic ='true'解决了这个问题。
首先我会对所有属性使用双引号。不知道为什么第二个dataTable没有显示,但我也有一些奇怪的行为与'p:tabView'(也许这取决于你把它放在里面)。因此,大多数情况下我只使用'p:TabView'作为触发器。在你的情况下,'p:tabs'将是空的,一个ajax监听器'tabChange'将被添加到'p:tabView.'数据表是有条件渲染的,然后取决于你选择的选项卡。 – opfau