Can anybody show me some sample about t:dataScroller with f:ajax?
I want to provide t:dataTable and t:dataScroller with f:ajax!
Thanks a lot for any reply!
Below is some code with no f:ajax for t:dataScroller, just same as the file
listCustomers.xhtml.
-------------------------------------------------------------------------------------------------------
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
<html xmlns="http://www.w3.org/1999/xhtml";
xmlns:f="http://java.sun.com/jsf/core";
xmlns:h="http://java.sun.com/jsf/html";
xmlns:ui="http://java.sun.com/jsf/facelets";
xmlns:t="http://myfaces.apache.org/tomahawk";>
<h:head>
<f:loadBundle basename="com.zhouen.sample.view.bundle.messages" var="msgs"/>
<h:outputStylesheet name="style.css" library="css"/>
<h:outputStylesheet name="skin.css" library="css"/>
<h:outputScript name="script.js" library="js"/>
<title>
<h:outputText value="#{msgs.application} - #{msgs.title_customer_list}"/>
</title>
</h:head>
<h:body>
<ui:include src="/inc/header.xhtml"/>
<center>
<h:panelGrid columns="1">
<h:outputText value="#{msgs.title_customer_list}" styleClass="title" />
<h:commandButton id="preCreateAction" value="#{msgs.title_customer_create}"
styleClass="button" action="#{customerController.preCreateAction}"/>
</h:panelGrid>
<h:form styleClass="normalForm">
<h:panelGroup id="customers">
<t:dataTable id = "customersData"
styleClass = "dataTable"
headerClass = "dataTable_header"
footerClass = "dataTable_footer"
rowClasses = "dataTable_rows_odd,
dataTable_rows_even"
var = "customer"
value =
"#{customerController.customerBeans}"
binding = "#{customerController.row}"
preserveDataModel = "true"
rows = "15"
rowId =
"#{customer.customerId}"
sortColumn = "#{customerController.sort}"
sortAscending =
"#{customerController.ascending}"
preserveSort = "true">
<t:column width="15%">
<f:facet name="header">
<f:ajax excute="@this" render="@form">
<t:commandSortHeader id="customerId" columnName="customerId"
arrow="true">
<h:outputText value="#{msgs.customer_customerId}"/>
</t:commandSortHeader>
</f:ajax>
</f:facet>
<h:commandLink id="customerId_"
action="#{customerController.viewAction}">
<h:outputText value="#{customer.customerId}"/>
</h:commandLink>
</t:column>
<t:column width="15%">
<f:facet name="header">
<f:ajax excute="@this" render="@form">
<t:commandSortHeader id="customerTypeId"
columnName="customerTypeId" arrow="true">
<h:outputText value="#{msgs.customer_customerTypeId}"/>
</t:commandSortHeader>
</f:ajax>
</f:facet>
<h:outputText id="customerTypeId_"
value="#{customer.customertype.name}"/>
</t:column>
<t:column width="25%">
<f:facet name="header">
<f:ajax excute="@this" render="@form">
<t:commandSortHeader id="name" columnName="name" arrow="true">
<h:outputText value="#{msgs.customer_name}"/>
</t:commandSortHeader>
</f:ajax>
</f:facet>
<h:outputText id="name_" value="#{customer.name}"/>
</t:column>
<t:column width="15%">
<f:facet name="header">
<f:ajax excute="@this" render="@form">
<t:commandSortHeader id="phone" columnName="phone"
arrow="true">
<h:outputText value="#{msgs.customer_phone}"/>
</t:commandSortHeader>
</f:ajax>
</f:facet>
<h:outputText id="phone_" value="#{customer.phone}"/>
</t:column>
<t:column width="15%">
<f:facet name="header">
<f:ajax excute="@this" render="@form">
<t:commandSortHeader id="remark" columnName="remark"
arrow="true">
<h:outputText value="#{msgs.customer_remark}"/>
</t:commandSortHeader>
</f:ajax>
</f:facet>
<h:outputText id="remark_" value="#{customer.remark}"/>
</t:column>
<t:column width="15%">
<f:facet name="header">
<h:outputText id="label_operation"
value="#{msgs.label_operation}"/>
</f:facet>
<h:panelGroup>
<h:commandButton value="#{msgs.label_view}"
styleClass="button" action="#{customerController.viewAction}"/>
<h:outputText value=" "/>
<h:commandButton value="#{msgs.label_edit}"
styleClass="button" action="#{customerController.preEditAction}"/>
<h:outputText value=" "/>
<h:commandButton value="#{msgs.label_delete}"
styleClass="button" action="#{customerController.deleteAction}" onclick="return
confirm('#{msgs.info_delete}');">
<f:ajax excute="@this" render="@form" />
</h:commandButton>
</h:panelGroup>
</t:column>
</t:dataTable>
<h:panelGrid columns="1" styleClass="dataTable_scroller"
columnClasses="dataTable_scroller_column">
<t:dataScroller id = "customerScroll"
for = "customersData"
fastStep = "10"
pageCountVar = "pageCount"
pageIndexVar = "pageIndex"
styleClass = "scroller"
paginator = "true"
paginatorMaxPages = "9"
paginatorTableClass = "paginator"
paginatorActiveColumnStyle = "font-weight: bold;"
actionListener =
"#{customerController.scrollerAction}"
>
<f:facet name="first">
<t:graphicImage library="images" name="arrow-first.gif"
alt="#{msgs.dataScroller_first}" border="1"/>
</f:facet>
<f:facet name="last">
<t:graphicImage library="images" name="arrow-last.gif"
alt="#{msgs.dataScroller_last}" border="1"/>
</f:facet>
<f:facet name="previous">
<t:graphicImage library="images" name="arrow-previous.gif"
alt="#{msgs.dataScroller_previous}" border="1"/>
</f:facet>
<f:facet name="next">
<t:graphicImage library="images" name="arrow-next.gif"
alt="#{msgs.dataScroller_next}" border="1"/>
</f:facet>
<f:facet name="fastforward">
<t:graphicImage library="images" name="arrow-ff.gif"
alt="#{msgs.dataScroller_fastforward}" border="1"/>
</f:facet>
<f:facet name="fastrewind">
<t:graphicImage library="images" name="arrow-fr.gif"
alt="#{msgs.dataScroller_fastrewind}" border="1"/>
</f:facet>
</t:dataScroller>
<t:dataScroller id = "customerScroll_pages"
for = "customersData"
rowsCountVar = "rowsCount"
displayedRowsCountVar = "displayedRowsCountVar"
firstRowIndexVar = "firstRowIndex"
lastRowIndexVar = "lastRowIndex"
pageCountVar = "pageCount"
pageIndexVar = "pageIndex"
>
<h:outputFormat value="#{msgs.dataScroller_pages}"
styleClass="output">
<f:param value="#{rowsCount}"/>
<f:param value="#{displayedRowsCountVar}"/>
<f:param value="#{firstRowIndex}"/>
<f:param value="#{lastRowIndex}"/>
<f:param value="#{pageIndex}"/>
<f:param value="#{pageCount}"/>
</h:outputFormat>
</t:dataScroller>
</h:panelGrid>
</h:panelGroup>
</h:form>
</center>
<ui:include src="/inc/footer.xhtml"/>
</h:body>
</html>
