以DataView为例子，先定义一个w:dataView，如下：

<w:dataView id="view-example" jsvar="productView" value="#{products}" var="p">
    <w:outputColumn id="title" value="#{p.title}"/>
    <w:outputColumn id="listPrice" value="#{p.listPrice}"/>
    <w:outputColumn id="yourPrice" value="#{p.yourPrice}"/>
    <w:outputColumn id="image" value="#{p.image}"/>
    <f:facet name="template">
      <h:panelGroup layout="block" styleClass="product">
        <h:panelGrid columns="2">
          <f:verbatim><img src="{image}" title="{title}" class="image"/></f:verbatim>
          <h:panelGrid columns="1">
            <f:verbatim><span class="title">{title}</span></f:verbatim>
            <f:verbatim><span>List Price: </span><span class="listPrice">{listPrice}</span></f:verbatim>
            <f:verbatim><span>Your Price: </span><span class="yourPrice">{yourPrice}</span></f:verbatim>
          </h:panelGrid>
        </h:panelGrid>
      </h:panelGroup>
    </f:facet>
    <f:facet name="empty">
      <f:verbatim>No data to display.</f:verbatim>
    </f:facet>
</w:dataView>

接着定义一个缺省风格的分页器，通过"for"属性指定它是为上面的DataView提供分页功能，如下：

<w:pagingLink id="pg1" for="view-example" pageSize="1"/>

也可以定义一个自己风格的分页器，如下：

<w:pagingLink id="pg2" for="view-example" pageSize="1" shownNumbers="4">
    <%--
    total模板参数：
      {0} 总页数
      {page} 当前页号
      {pages} 总页数
      {start} 本页起始记录号
      {end} 本页结束记录号
      {total} 总记录数
    --%>
    <f:facet name="total"><f:verbatim>共{0}页</f:verbatim></f:facet>

    <%--
    number模板参数：
      {0} 当前页号
      {page} 同上
      {start} 本页起始记录号
      {end} 本页结束记录号
    --%>
    <f:facet name="number"><f:verbatim>[{0}]</f:verbatim></f:facet>

    <f:facet name="first"><f:verbatim>首页</f:verbatim></f:facet>
    <f:facet name="last"><f:verbatim>末页</f:verbatim></f:facet>
    <f:facet name="previous"><f:verbatim>上页</f:verbatim></f:facet>
    <f:facet name="next"><f:verbatim>下页</f:verbatim></f:facet>
</w:pagingLink>

还可以给PagingLink加上自己喜欢的样式，例如变成像Google那种，如下：

<w:pagingLink id="pg3" for="view-example" pageSize="1"/> 
<style> 
  #pg3 li {
    display:block; 
    float:left; 
    padding:28px 0 0 0; 
    margin:0; 
  } 

  #pg3 li.x-prev-page { 
    background:url(images/g.gif) top right no-repeat; 
    width:75px; 
  }

  #pg3 li.x-next-page { 
    background:url(images/gle.gif) top left no-repeat; 
    width:75px; 
  } 

  #pg3 li.x-page-number { 
    background:url(images/o.gif) 0 0 no-repeat; font-size:13px; 
    width:16px; 
    white-space:nowrap; 
    overflow:hidden; 
  }

  #pg3 li.selected {
    background:url(images/ao.gif) 0 0 no-repeat; 
  } 
</style>