Primefaces数据表过滤器和分页器ajax功能在使用模板时不起作用

时间:2014-09-14 12:58:10

标签: jquery jsf jsf-2 primefaces datatable

我有一个数据表,它在纯.xhtml上完美运行。

但是,当我使用模板尝试时,过滤器和分页器不起作用。

我无法点击第2页或第3页按钮。

当我键入值时,过滤器不起作用。

它就像一张静态表。见下图。图像中省略了数据。

有关如何解决此问题的任何想法?

更新:我发现类似于我的问题。 Primefaces dataTable ajax functionality brakes when included in a <ui:include tag/>

但是,我使用的是JSF2.2所以不应该有问题吗?

enter image description here

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>

0 个答案:

没有答案