Usage of multiple dataTables with a dataScroller each leads to dataScroller malfunction

问题

I have a JSF page with three dataTables. Each of them has an associated dataScroller. When viewing the page only the last dataScroller (on the bottom) works. The others only load the page selected on the last dataTable when selecting any page in their own dataScroller.

I've debugged the page with Firebug and I found nothing relevant. Neither did I find any thread here or in other forums about how to solve this issue.

I post also some code, just in case it could be helpful. Thanks in advance:

homepage.xhtml

<?xml version="1.0" encoding="ISO-8859-1" standalone="yes" ?>
<html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:rich="http://richfaces.org/rich"
    xmlns:c="http://java.sun.com/jstl/core">

<ui:composition template="layouts/template.jsf">
    <ui:define name="body">
        <h3>#{msg.homepageCaption1}</h3>
        <h:form id="form">
            <div>
                <rich:dataTable value="#{HomepageBean.firstTable}"
                    var="tOne" id="tableOne" rows="5">
                    <rich:column>
                        <f:facet name="header">
                            <h:outputText value="#{msg.firstColumn}" />
                        </f:facet>
                        <h:outputText value="#{tOne.firstColumn}" />
                    </rich:column>
                    <rich:column>
                        <f:facet name="header">
                            <h:outputText value="#{msg.secondColumn}" />
                        </f:facet>
                        <h:outputText value="#{tOne.secondColumn}" />
                    </rich:column>
                    <rich:column>
                        <f:facet name="header">
                            <h:outputText value="#{msg.thirdColumn}" />
                        </f:facet>
                        <h:outputText value="This is an String" />
                    </rich:column>
                    <rich:column>
                        <f:facet name="header">
                            <h:outputText value="#{msg.fourthColumn}" />
                        </f:facet>
                        <h:outputText value="#{tOne.fourthColumn}" />
                    </rich:column>
                    <rich:column>
                        <f:facet name="header">
                            <h:outputText value="#{msg.fifthColumn}" />
                        </f:facet>
                        <h:outputText value="#{tOne.fifthColumn}" />
                    </rich:column>
                </rich:dataTable>
                <rich:dataScroller for="tableOne"
                    pageIndexVar="#{HomepageBean.firstTablePage}"
                     ajaxSingle="false">
                    <f:facet name="previous">
                        <h:outputText value="&lt;" />
                    </f:facet>
                    <f:facet name="next">
                        <h:outputText value="&gt;" />
                    </f:facet>
                    <f:facet name="fastrewind">
                        <h:outputText value="&lt;&lt;" />
                    </f:facet>
                    <f:facet name="fastforward">
                        <h:outputText value="&gt;&gt;" />
                    </f:facet>
                </rich:dataScroller>
            </div>
            <div>
                <h3>#{msg.homepageCaption2}</h3>
                <rich:dataTable
                    value="#{HomepageBean.secondTable}" var="tTwo"
                    id="tableTwo" rows="5">
                    <rich:column>
                        <f:facet name="header">
                            <h:outputText value="#{msg.firstColumn}" />
                        </f:facet>
                        <h:outputText value="#{tTwo.firstColumn}" />
                    </rich:column>
                    <rich:column>
                        <f:facet name="header">
                            <h:outputText value="#{msg.secondColumn}" />
                        </f:facet>
                        <h:outputText value="#{tTwo.secondColumn}" />
                    </rich:column>
                    <rich:column>
                        <f:facet name="header">
                            <h:outputText value="#{msg.thirdColumn}" />
                        </f:facet>
                        <h:outputText value="This is an string" />
                    </rich:column>
                    <rich:column>
                        <f:facet name="header">
                            <h:outputText value="#{msg.fourthColumn}" />
                        </f:facet>
                        <h:outputText value="#{tTwo.fourthColumn}" />
                    </rich:column>
                    <rich:column>
                        <f:facet name="header">
                            <h:outputText value="#{msg.fifthColumn}" />
                        </f:facet>
                        <h:outputText value="#{tTwo.fifthColumn}" />
                    </rich:column>
                </rich:dataTable>
                <rich:dataScroller for="tableTwo"
                    pageIndexVar="#{HomepageBean.secondTablePage}"
                    ajaxSingle="false">
                    <f:facet name="previous">
                        <h:outputText value="&lt;" />
                    </f:facet>
                    <f:facet name="next">
                        <h:outputText value="&gt;" />
                    </f:facet>
                    <f:facet name="fastrewind">
                        <h:outputText value="&lt;&lt;" />
                    </f:facet>
                    <f:facet name="fastforward">
                        <h:outputText value="&gt;&gt;" />
                    </f:facet>
                </rich:dataScroller>
            </div>
            <div>
                <h3>#{msg.homepageCaption3}</h3>
                <rich:dataTable
                    value="#{homepageBean.thirdTable}" var="tThree"
                    id="tableThree" rows="5">
                    <rich:column>
                        <f:facet name="header">
                            <h:outputText value="#{msg.firstColumn}" />
                        </f:facet>
                        <h:outputText value="#{tThree.firstColumn}" />
                    </rich:column>
                    <rich:column>
                        <f:facet name="header">
                            <h:outputText value="#{msg.secondColumn}" />
                        </f:facet>
                        <h:outputText value="#{tThree.secondColumn}" />
                    </rich:column>
                    <rich:column>
                        <f:facet name="header">
                            <h:outputText value="#{msg.thirdColumn}" />
                        </f:facet>
                        <h:outputText value="This is an string" />
                    </rich:column>
                    <rich:column>
                        <f:facet name="header">
                            <h:outputText value="#{msg.fourthColumn}" />
                        </f:facet>
                        <h:outputText value="#{tThree.fourthColumn}" />
                    </rich:column>
                    <rich:column>
                        <f:facet name="header">
                            <h:outputText value="#{msg.fifthColumn}" />
                        </f:facet>
                        <h:outputText value="#{tThree.fifthColumn}" />
                    </rich:column>
                </rich:dataTable>
                <rich:dataScroller for="tableThree"
                    pageIndexVar="#{homepageBean.thirdTablePage}"
                    ajaxSingle="false">
                    <f:facet name="previous">
                        <h:outputText value="&lt;" />
                    </f:facet>
                    <f:facet name="next">
                        <h:outputText value="&gt;" />
                    </f:facet>
                    <f:facet name="fastrewind">
                        <h:outputText value="&lt;&lt;" />
                    </f:facet>
                    <f:facet name="fastforward">
                        <h:outputText value="&gt;&gt;" />
                    </f:facet>
                </rich:dataScroller>
            </div>
        </h:form>
    </ui:define>
</ui:composition>
</html>

homepageBean.java

package somepackage.bean;

import java.util.List;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.context.annotation.Scope;
import org.springframework.stereotype.Component;

import somepackage.service.HomepageService;
import somepackage.viewdto.ViewDTO;

@Component("HomepageBean")
@Scope("request")
public class HomepageBean {

    private List<ViewDTO> firstTable;
    private List<ViewDTO> secondTable;
    private List<ViewDTO> thirdTable;
    private int firstTablePage;
    private int secondTablePage;
    private int thirdTablePage;
    @Autowired
    private HomepageService homepageService;


    public List<ViewDTO> getFirstTable() {
        return firstTable;
    }
    public void setFirstTable(List<ViewDTO> firstTable) {
        this.firstTable = firstTable;
    }
    public List<ViewDTO> getSecondTable() {
        return secondTable;
    }
    public void setSecondTable(List<ViewDTO> secondTable) {
        this.secondTable = secondTable;
    }
    public List<ViewDTO> getThirdTable() {
        return thirdTable;
    }
    public void setThirdTable(List<ViewDTO> thirdTable) {
        this.thirdTable = thirdTable;
    }
    public int getFirstTablePage() {
        return firstTablePage;
    }
    public void setFirstTablePage(int firstTablePage) {
        this.firstTablePage = firstTablePage;
    }
    public int getSecondTablePage() {
        return secondTablePage;
    }
    public void setSecondTablePage(int secondTablePage) {
        this.secondTablePage = secondTablePage;
    }
    public int getThirdTablePage() {
        return thirdTablePage;
    }
    public void setThirdTablePage(int thirdTablePage) {
        this.thirdTablePage = thirdTablePage;
    }
    public HomepageService getHomepageService() {
        return homepageService;
    }
    public void setHomepageService(HomepageService homepageService) {
        this.homepageService = homepageService;
    }

}

回答1:

The issue was solved nesting each table inside a panelGrid (no idea whether this should be the strictly correct approach but it worked):

<?xml version="1.0" encoding="ISO-8859-1" standalone="yes" ?>
<html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:rich="http://richfaces.org/rich"
    xmlns:c="http://java.sun.com/jstl/core">

<ui:composition template="layouts/template.jsf">
    <ui:define name="body">
        <h3>#{msg.homepageCaption1}</h3>
        <h:form id="form">
            <h:panelGrid columnClasses="acent">
                <rich:dataTable value="#{HomepageBean.firstTable}"
                    var="tOne" id="tableOne" rows="5">
                    <rich:column>
                        <f:facet name="header">
                            <h:outputText value="#{msg.firstColumn}" />
                        </f:facet>
                        <h:outputText value="#{tOne.firstColumn}" />
                    </rich:column>
                    <rich:column>
                        <f:facet name="header">
                            <h:outputText value="#{msg.secondColumn}" />
                        </f:facet>
                        <h:outputText value="#{tOne.secondColumn}" />
                    </rich:column>
                    <rich:column>
                        <f:facet name="header">
                            <h:outputText value="#{msg.thirdColumn}" />
                        </f:facet>
                        <h:outputText value="This is an String" />
                    </rich:column>
                    <rich:column>
                        <f:facet name="header">
                            <h:outputText value="#{msg.fourthColumn}" />
                        </f:facet>
                        <h:outputText value="#{tOne.fourthColumn}" />
                    </rich:column>
                    <rich:column>
                        <f:facet name="header">
                            <h:outputText value="#{msg.fifthColumn}" />
                        </f:facet>
                        <h:outputText value="#{tOne.fifthColumn}" />
                    </rich:column>
                </rich:dataTable>
                <rich:dataScroller for="tableOne"
                    pageIndexVar="#{HomepageBean.firstTablePage}"
                     ajaxSingle="false">
                    <f:facet name="previous">
                        <h:outputText value="&lt;" />
                    </f:facet>
                    <f:facet name="next">
                        <h:outputText value="&gt;" />
                    </f:facet>
                    <f:facet name="fastrewind">
                        <h:outputText value="&lt;&lt;" />
                    </f:facet>
                    <f:facet name="fastforward">
                        <h:outputText value="&gt;&gt;" />
                    </f:facet>
                </rich:dataScroller>
            </h:panelGrid>
            <h:panelGrid columnClasses="acent">
                <h3>#{msg.homepageCaption2}</h3>
                <rich:dataTable
                    value="#{HomepageBean.secondTable}" var="tTwo"
                    id="tableTwo" rows="5">
                    <rich:column>
                        <f:facet name="header">
                            <h:outputText value="#{msg.firstColumn}" />
                        </f:facet>
                        <h:outputText value="#{tTwo.firstColumn}" />
                    </rich:column>
                    <rich:column>
                        <f:facet name="header">
                            <h:outputText value="#{msg.secondColumn}" />
                        </f:facet>
                        <h:outputText value="#{tTwo.secondColumn}" />
                    </rich:column>
                    <rich:column>
                        <f:facet name="header">
                            <h:outputText value="#{msg.thirdColumn}" />
                        </f:facet>
                        <h:outputText value="This is an string" />
                    </rich:column>
                    <rich:column>
                        <f:facet name="header">
                            <h:outputText value="#{msg.fourthColumn}" />
                        </f:facet>
                        <h:outputText value="#{tTwo.fourthColumn}" />
                    </rich:column>
                    <rich:column>
                        <f:facet name="header">
                            <h:outputText value="#{msg.fifthColumn}" />
                        </f:facet>
                        <h:outputText value="#{tTwo.fifthColumn}" />
                    </rich:column>
                </rich:dataTable>
                <rich:dataScroller for="tableTwo"
                    pageIndexVar="#{HomepageBean.secondTablePage}"
                    ajaxSingle="false">
                    <f:facet name="previous">
                        <h:outputText value="&lt;" />
                    </f:facet>
                    <f:facet name="next">
                        <h:outputText value="&gt;" />
                    </f:facet>
                    <f:facet name="fastrewind">
                        <h:outputText value="&lt;&lt;" />
                    </f:facet>
                    <f:facet name="fastforward">
                        <h:outputText value="&gt;&gt;" />
                    </f:facet>
                </rich:dataScroller>
            </h:panelGrid>
            <h:panelGrid columnClasses="acent">
                <h3>#{msg.homepageCaption3}</h3>
                <rich:dataTable
                    value="#{homepageBean.thirdTable}" var="tThree"
                    id="tableThree" rows="5">
                    <rich:column>
                        <f:facet name="header">
                            <h:outputText value="#{msg.firstColumn}" />
                        </f:facet>
                        <h:outputText value="#{tThree.firstColumn}" />
                    </rich:column>
                    <rich:column>
                        <f:facet name="header">
                            <h:outputText value="#{msg.secondColumn}" />
                        </f:facet>
                        <h:outputText value="#{tThree.secondColumn}" />
                    </rich:column>
                    <rich:column>
                        <f:facet name="header">
                            <h:outputText value="#{msg.thirdColumn}" />
                        </f:facet>
                        <h:outputText value="This is an string" />
                    </rich:column>
                    <rich:column>
                        <f:facet name="header">
                            <h:outputText value="#{msg.fourthColumn}" />
                        </f:facet>
                        <h:outputText value="#{tThree.fourthColumn}" />
                    </rich:column>
                    <rich:column>
                        <f:facet name="header">
                            <h:outputText value="#{msg.fifthColumn}" />
                        </f:facet>
                        <h:outputText value="#{tThree.fifthColumn}" />
                    </rich:column>
                </rich:dataTable>
                <rich:dataScroller for="tableThree"
                    pageIndexVar="#{homepageBean.thirdTablePage}"
                    ajaxSingle="false">
                    <f:facet name="previous">
                        <h:outputText value="&lt;" />
                    </f:facet>
                    <f:facet name="next">
                        <h:outputText value="&gt;" />
                    </f:facet>
                    <f:facet name="fastrewind">
                        <h:outputText value="&lt;&lt;" />
                    </f:facet>
                    <f:facet name="fastforward">
                        <h:outputText value="&gt;&gt;" />
                    </f:facet>
                </rich:dataScroller>
            </h:panelGrid>
        </h:form>
    </ui:define>
</ui:composition>
</html>

来源：https://stackoverflow.com/questions/21377872/usage-of-multiple-datatables-with-a-datascroller-each-leads-to-datascroller-malf

标签

jsf

datatable

richfaces

datascroller