我有一个数据表,它在纯.xhtml上完美运行。
但是,当我使用模板尝试时,过滤器和分页器不起作用。
我无法点击第2页或第3页按钮。
当我键入值时,过滤器不起作用。
它就像一张静态表。见下图。图像中省略了数据。
有关如何解决此问题的任何想法?
更新:我发现类似于我的问题。 Primefaces dataTable ajax functionality brakes when included in a <ui:include tag/>
但是,我使用的是JSF2.2所以不应该有问题吗?
Mypage.xhtml
<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:f="http://xmlns.jcp.org/jsf/core"
xmlns:p="http://primefaces.org/ui"
template="./template/defaultMaster.xhtml"
>
<h:head>
<title>XXXXXXXXX</title>
</h:head>
<ui:define name="content">
<div class="row wrapper border-bottom white-bg page-heading">
<div class="col-lg-9">
<h2>Admin Panel</h2>
<ol class="breadcrumb">
<li class="active">
<strong>Audit Log Viewer</strong>
</li>
</ol>
</div>
</div>
<div class="wrapper wrapper-content">
<div class="row">
<div class="col-lg-12">
<div class="ibox float-e-margins">
<div class="ibox-title">
<h5>Audit Log Viewer</h5>
<div class="ibox-tools">
<a class="collapse-link">
<i class="fa fa-chevron-up"></i>
</a>
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
<i class="fa fa-wrench"></i>
</a>
<ul class="dropdown-menu dropdown-user">
<li><a href="#">Config option 1</a>
</li>
<li><a href="#">Config option 2</a>
</li>
</ul>
<a class="close-link">
<i class="fa fa-times"></i>
</a>
</div>
</div>
<div class="ibox-content">
<h:body>
<p:panel header="View Audit Logs">
<h:form id="formAllCustomers">
<p:dataTable id="dataTableAllCustomers" value="#{auditLogBean.allLogs}" var="auditlog" rows="25" paginator="true"
resizableColumns="true">
<p:column filterBy="#{auditlog.logUser}" filterMatchMode="contains" sortBy="#{auditlog.logUser}" headerText="User" >
<h:outputText value="#{auditlog.logUser}" />
</p:column>
<p:column filterBy="#{auditlog.logTime}" filterMatchMode="contains" sortBy="#{auditlog.logTime}" headerText="Time stamp">
<h:outputText value="#{auditlog.logTime}" />
</p:column>
<p:column filterBy="#{auditlog.logDetails}" filterMatchMode="contains" sortBy="#{auditlog.logDetails}" headerText="Details">
<h:outputText value="#{auditlog.logDetails}" />
</p:column>
</p:dataTable>
<p:commandButton value="Go to home" id="gohome" action="home" ajax="false" />
<h:outputText value="#{facesContext.externalContext.getSessionId(true)}" />
</h:form>
</p:panel>
</h:body>
</div>
</div>
</div>
</div>
</div>
</ui:define>
</ui:composition>
defaultMaster.xhtml
<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:f="http://xmlns.jcp.org/jsf/core"
xmlns:p="http://primefaces.org/ui"
xmlns:jsf="http://xmlns.jcp.org/jsf"
xmlns:pt="http://xmlns.jcp.org/jsf/passthrough"
>
<ui:composition>
<h:head>
<h:outputStylesheet name="./css/bootstrap.min.css" />
<h:outputStylesheet name="./font-awesome/css/font-awesome.css" />
<h:outputStylesheet name="./css/animate.css" />
<h:outputStylesheet name="./css/style.css" />
<h:outputStylesheet name="./css/morris-0.4.3.min.css" />
<h:outputStylesheet name="./css/jquery.gritter.css" />
<h:outputScript name="./js/jquery-1.10.2.js" />
<h:outputScript name="./js/bootstrap.min.js" />
<h:outputScript name="./js/jquery.metisMenu.js" />
</h:head>
<h:body>
<f:view>
<h:form>
<p:idleMonitor timeout="10000">
<p:ajax event="idle" listener="#{idleMonitorView.onIdle()}"/>
</p:idleMonitor>
</h:form>
</f:view>
</h:body>
........................ code committed because it's too long
<ui:insert name="content">Content</ui:insert>
</div>
</div>
</ui:composition>
</html>