【发布时间】：2016-01-03 03:01:09
【问题描述】：
我有一个包含 2 个选项卡的 primefaces 页面。两个选项卡都有自己的数据表。数据查询完成后，第一个选项卡中的dataTable可以正常显示查询到的数据，但第二个选项卡不显示（请参考图片）
这是我的 xhtml 文件代码
<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>
如果有人遇到这个问题并解决了它。请帮忙谢谢。
【问题讨论】：
-
首先我会为所有属性使用双引号。不知道为什么没有显示第二个数据表，但我对
p:tabView也有一些奇怪的行为（也许这取决于你在里面放了什么）。因此，大多数情况下我只使用p:TabView作为触发器。在您的情况下，p:tabs将为空，并且 ajax 侦听器tabChange将添加到p:tabView.有条件地呈现数据表，然后取决于您选择的选项卡。
标签： jsf primefaces datatable tabview