使用ajax4jsf来处理JSF table
下面是一个使用ajax风格的JSF table,有ajax来出来table的翻页和插入删除.
JSP Page Coding
<!--Data Table:-->
<h:dataTable id="cityList" value="#{cityBean.cities}" var="clist" rows="10"
first="#{cityBean.offset}" border="2" width="200px" rules="all">
<h:column>
<h:outputText value="#{clist}" />
</h:column>
</h:dataTable>
<!--AJAX-based Pagination Links-->
<h:panelGroup style="display:block">
<a4j:commandLink value="Previous.. " action="#{cityBean.prevAction}"
reRender="cityList"></a4j:commandLink>
<a4j:commandLink value=" Next.." action="#{cityBean.nextAction}"
reRender="cityList"></a4j:commandLink>
</h:panelGroup>
<!--AJAX-based Add/Remove Buttons-->
<h:panelGroup style="display:block">
<a4j:commandButton value="Add Town" action="#{cityBean.addTown}"
reRender="cityList,statusmessage"></a4j:commandButton>
<a4j:commandButton value="Delete Town" action="#{cityBean.deleteTown}"
reRender="cityList,statusmessage"></a4j:commandButton>
</h:panelGroup>
data bable每次将从cityBean的list中取10条数据显示. a4j:CommandLinks 中的 Next and PrevAction 来处理页面导航. Add and DeleteTown actions来处理列出的内容.
Java Code
...
public void prevAction(){
if (getOffset() > 9){
setOffset(getOffset() - 10);
}
}
public void nextAction(){
if (getOffset() < getCities().size() - 9){
setOffset(getOffset() + 10);
}
}
public void addTown() {
if (!this.cities.contains(cityName)){
this.cities.add(cityName);
Collections.sort(cities);
this.statusMessage = "The Town Succesfully Added, Table Was Sorted";
}else{
this.statusMessage = "This Town Is Already In Table";
}
}
public void deleteTown(){
if (cities.contains(this.cityName)){
this.cities.remove(this.cityName);
this.statusMessage = "The Town Succesfully Removed";
}else{
this.statusMessage = "Town Does Not Exist";
}
}
...
所以,你可以实现一个可以排序,更新的ajax mode的table,而不用写任何js代码.仅仅记得当调用完action时要从新渲染table就可以了.