使用ajax4jsf来处理JSF table

使用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就可以了.