我建立一个Web应用程序使用JSF 2.2和primefaces 4.0。

I am building a web application using jsf 2.2 and primefaces 4.0.

在一个页面上，我称之为实验来看我列出结果保存在数据库中的实验。一些实验可能具有很长的试验结果列表和从每个结果列表中的我建立的数值的表中为该结果，则建立一个图表（使用谷歌图表）为该数据。在一个实验中包含约100个​​结果100表和100图表需要建立该页面，它需要长期的时间，所以我需要找到一个解决方案如何解决这个问题。

On one page which I call experiment view I list results for an experiment saved in a database. Some experiments might have a very long list of experimental results and from each result in the list I build a table of the numeric values for that result, then build a chart (using google charts) for that data. When an experiment contains about 100 results 100 tables and 100 charts need to be built on that page, which takes to long time, so I need to find a solution to how to get around this.

首先，我尝试了渲染所有的表，它并不需要那么多的时间，然后逐渐绘制图表，当用户向下滚动。我无法使这项工作以令人满意的方式，所以我决定尝试别的东西。

First I tried just rendering all the tables, which doesn't take that much time then incrementally drawing the charts when the user scrolls down. I was not able to make this work in a satisfactory way so I decided to try something else.

我现在的想法是使用有一个命令按钮，单击时触发Ajax调用并注入约10个新的实验结果娄previously呈现。但在这里我得到一个有点卡住了。我不知道如何实现这一目标而不覆盖previously渲染列表中的项目。

My idea now is to use have a command button that when clicked triggers an ajax call and injects about 10 new experimental results bellow the previously rendered. But here I get a bit stuck. I don't know how to achieve this without overwriting the previously rendered list items.

这是怎么了文档的渲染列表中的部分着眼于时刻：

This is how the part of the document rendering the list looks at the moment:

<h:form id="assayDataForm" >
<div style="height: 1000px;overflow: scroll !important;" >
    <ui:repeat id="loaded" value="#{exp.loadedAssays}" var="a" >                    
        <div style="width: 900px !important;">
            <p:dataTable style="width:300px !important;  float: left !important;" value="#{a.data}" var="data"  >
                <f:facet name="header" >                                                        
                <h:outputText  value="Data from assay #{exp.expDetail.assayList.indexOf(a) + 1} " />
                </f:facet>
                <p:column headerText="Labels">
                    #{data.labels}
                </p:column>
                <p:column headerText="Value">
                    #{data.value}
                </p:column>                                             
            </p:dataTable>         
        <div id="chart_div#{a.id}" style="width: 600px !important; height: 450px !important; float: left !important;"></div>   
        </div>       
    </ui:repeat>    
</div>
    <h:commandLink rendered="#{exp.totalAssays > exp.loadedAssays.size()}" action="#{exp.loadNextNAssays()}" value="Load more values" >
        <f:ajax render="assayDataForm" execute="@form"  />
    </h:commandLink>        
</h:form>

这是我怎么能修改此，这样我就不会覆盖previous内容有任何提示？

Any hints on how I could modify this so that I don't overwrite previous content?

推荐答案

您可以使用一个隐藏的面板，只包含了最新的（比方说）10个结果。你将有另一个面板，这是最初加载，并包含前N个记录。

you can use a hidden panel, containing only the latest (let's say) 10 results. and you will have another panel, which is loaded initially and contains the first N records.

Ajax请求完成每一次，你会呈现newResultsPanel，然后添加它的内容为initialResultsPanel使用javascript / jQuery的。

each time the ajax request is completed, you will render the "newResultsPanel" and then append it's content to "initialResultsPanel" using javascript/jquery.

<div id="initialResultsPanel" ...>
    ...
</div>
<h:panelGroup layout="block" id="newResultsPanel" style="display: none;" >
    <ui:repeat id="loaded" value="#{exp.loadedAssays}" var="a" >                    
        ...
    </ui:repeat>    
</h:panelGroup>
<h:commandLink rendered="#{exp.totalAssays > exp.loadedAssays.size()}" action="#{exp.loadNextNAssays()}" value="Load more values" >
    <f:ajax render="newResultsPanel" execute="@form" onevent="eventCompleted" />
</h:commandLink>

<script>
function eventCompleted(data) {
    if (data.status == "success") {
        $('#initialResultsPanel').append($('#newResultsPanel').html());
    }
} 
</script>