jsf的2个datatable的左右移动

定义了两个h:dataTable， 左边的一个datatable从数据库库中查出，当我选中h:selectBooleanCheckbox这一行（数据库的一条记录，有多个字段），再点击按钮触发事件将他移动到右边的datatable中（反之，也可以从右边移动到左边），再增加一些字段保存到另外一张数据库表，谁曾经做过这种功能啊，用jsf？？可以给我指点一下吗？？
<table>
<tr>
<td>
<div>
<h:dataTable value="#{transBean.unallot}" var="t"
styleClass="dt" rowClasses="dt-r1,dt-r2" cellpadding="1"
border="1" binding="#{transBean.table}" width="500"
style="width: 250px; height: 50px" frame="border">
<h:column>
<f:facet name="header">
<h:outputText value="序号" />
</f:facet>
<h:outputText value="#{transBean.table.rowIndex + 1}" />
</h:column>
<h:column>
<f:facet name="header">
<h:outputText value="全选" />
</f:facet>
<h:selectBooleanCheckbox id="list1" value="#{t.ftransId}"></h:selectBooleanCheckbox>
</h:column>
</h:dataTable>
</div>
</td>
<td>
<div>
<input type="button" name="delCat" id="delCat" value=" 添加 > "
onClick="move(document.getElementById('select:list1'),document.getElementById('select:list2'));" />
<input type="button" name="addCat" id="addCat" value=" < 删除 "
onClick="move(document.getElementById('select:list2'),document.getElementById('select:list1'));" />
</div>
</td>
<td>
<div>
<h:dataTable styleClass="dt" rowClasses="dt-r1,dt-r2"
cellpadding="1" border="1" width="500"
style="width: 250px; height: 50px" frame="border">
<h:column>
<f:facet name="header">
<h:outputText value="序号" />
</f:facet>
<h:outputText />
</h:column>
<h:column>
<f:facet name="header">
<h:outputText value="全选" />
</f:facet>
<h:selectBooleanCheckbox id="list2"></h:selectBooleanCheckbox>
</h:column> </h:dataTable>
</div>
</td>
</tr>
</table>