I don't know of any out-of-the-box component in JSF capable of doing your task, but I can think of a possible workaround.
Essentially, you can have an empty placeholder with a predefined id
, have it be populated via an AJAX call of <h:commandButton>
and when the HTML DOM is updated afterwards, move the contents via javascript. One note: when you assign ids to your JSF components, beware of using this approach with naming containers, like <h:dataTable>
, or <ui:repeat>
, as they control identifiers of their children. Finally, it leaves you only with the style class defined in your elements. Basic example goes below.
The view:
<h:form id="form">
<h:panelGroup id="basic">
<ul class="basic-list">
<ui:repeat var="data" value="#{bean.basicList}">
<li class="data-class">#{data.value}</li>
<ui:repeat>
</ul>
<h:panelGroup>
<h:panelGroup id="additional">
<ul class="additional-list">
<ui:repeat var="data" value="#{bean.additionalList}">
<li class="data-class">#{data.value}</li>
<ui:repeat>
</ul>
<h:panelGroup>
<h:commandButton value="Load 10 more rows">
<f:ajax render="additional" onevent="replaceData" listener="#{bean.loadAdditionalData}"/>
</h:commandButton>
</h:form>
The bean:
@ManagedBean
@ViewScoped
public class Bean implements Serializable {
private List<Data> basicList;//getter+setter
private List<Data> additionalList;//getter+setter
@PostConstruct
public void init() {
basicList = new ArrayList<Data>();//populate first rows of data from somewhere
}
public void loadAdditionalData(AjaxBehaviorEvent event) {
additionalList = new ArrayList<Data>();//populate additional rows of data from somewhere
basicList.addAll(additionalList);//just for a possible postback
}
}
The JavaScript:
function replaceData(data) {
if(data.status == 'success') {
var toAppend = $('#additional-list').html();
$('#basic-list').append(toAppend);
}
}