Primefaces Datatable filtering and pagination issue

Question

I am using the JSF 2.0 and primefaces 3.5. the problem i am facing is i have created a datatable on a page .. every things works fine along with pagination and filtering, but when i include the same page into the template ... the pagination and filtering stop working.. any idea regarding this the code is

<h:form id="form">
    <p:dataTable var="row" rowKey="row.attackID"
        value="#{attackBean.list}" id="tableAttack" paginator="true"
        rows="10" selection="#{attackBean.selectedAttack}"
        filteredValue="#{attackBean.filteredAttack}"
        rowsPerPageTemplate="5,10,15" selectionMode="single">

        <p:ajax event="rowSelect" update=":centerForm:form:display"
            oncomplete="dlg.show()" />

        <p:column headerText="Attack-ID" filterBy="#{row.attackID}">
            <h:outputText value="#{row.attackID}" />
        </p:column>
        <p:column headerText="Action Name" filterBy="#{row.attackName}">
            <h:outputText value="#{row.attackName}" />
        </p:column>
        <p:column headerText="Defended User" filterBy="#{row.userID}">
            <h:outputText value="#{row.userID}" />
        </p:column>
        <p:column headerText="Action Taken">
            <h:outputText value="#{row.actionTaken}" />
        </p:column>
        <p:column headerText="Attack Time">
            <h:outputText value="#{row.attackTime}" />
        </p:column>
    </p:dataTable>

    <p:dialog id="tDialog" header="Threat info" widgetVar="dlg"
        modal="true" height="250" width="300" showEffect="explode"
        hideEffect="bounce">
        <h:panelGrid id="display" columns="1" cellpadding="4">
            <h:outputText value="Attack ID: #{attackBean.selectedAttack.attackID} " />
            <h:outputText value="Description: #{attackBean.selectedAttack.userID}" />
            <h:outputText
                value="Action Taken: #{attackBean.selectedAttack.actionTaken}" />
        </h:panelGrid>
    </p:dialog>
</h:form>

here is the main templete code

 <h:body style="">
<div id="page" >

        <h:panelGroup id="mainPanel">
        <div id="left" class="bar">
            <ui:insert name="left">
                <ui:include src="commonLeft.xhtml" />
            </ui:insert>
        </div>
        <div id="center">

            <div id="hDiv">
                <ui:insert name="left">
                <ui:include src="commonHeader.xhtml" />
            </ui:insert>
            </div>
            <div id="cDiv">
                <h:form id="centerForm">        
                <h:panelGroup id="centerPanel" render="mainPanel">
                    <ui:include src="#{browse.url}" />
                </h:panelGroup>
                </h:form>
            </div>
        </div>
        <div id="right" >
            <ui:insert name="right">
                <ui:include src="commonFooter.xhtml" />
            </ui:insert>
        </div>
    </h:panelGroup>

</div>      
 </h:body>

Answer 1

I assume you are including your template in this section:

<h:form id="centerForm">        
    <h:panelGroup id="centerPanel" render="mainPanel">
        <ui:include src="#{browse.url}" />
    </h:panelGroup>
</h:form>

If that's the case, then you have a problem of nested forms. That is not allowed and the inner form is getting removed from the HTML code (you can see that in the source code in the browser). You should not impose the form in the parent template, and let the children create the forms they are going to use.