rich:dataTable 分页 - 标记 Rich:datascroller 的已访问页面答案

【问题标题】：rich:dataTable paging - marking visited pages of rich:datascrollerrich:dataTable 分页 - 标记 Rich:datascroller 的已访问页面
【发布时间】：2011-03-24 16:12:14
【问题描述】：

是否可以在rich:dataTable的分页页脚中标记访问过的页码？如果是这样，具体如何？页脚很丰富：datascroller。

【问题讨论】：

标签： jsf richfaces

【解决方案1】：

您可以使用rich:datascroller 中的<f:facet name="pages"> 构面以您自己的方式显示各个页面链接。在 backing bean 中记录访问过的页面，对访问过的页面应用一个 css 类。

在此处查看示例：http://livedemo.exadel.com/richfaces-demo/richfaces/dataTableScroller.jsf?tab=scrollerfacets（点击查看源代码）

【讨论】：

我只想在rich:datascroller常规页码可视化中更改访问页码的css。例如有页面：1|2|3|4|5|6，我访问了第 3 页和第 4 页。所以数字 3 和 4 应该涂成红色。

【解决方案2】：

你的意思是显示当前查看页面的页码？？如果是，您可以使用<rich:datascroller> 的pageIndexVar 属性来完成，该属性定义了当前查看页面的页码。另一方面，pagesVar 属性定义了<rich:datascroller> 中的总页数。

请注意，这两个属性必须在名为 pages 的 <f:facet> 中使用。此外，请确保整个<rich:datascroller> 被<h:form> 包围。例如：

     <h:form>      
                   <rich:dataTable id="dt" value="#{test.dataList}" var="row" rows="10">    
                           <rich:column>
                                    <h:outputText value="#{row.col1}" />
                           </rich:column>
                           <rich:column>
                                  <h:outputText value="#{row.col2}" />
                           </rich:column>      
                           <f:facet name="footer">
                                <rich:datascroller pageIndexVar="pageIndex" pagesVar="pages" >
                                    <f:facet name="pages">
                                            <h:outputText value="#{pageIndex} / #{pages}" />
                                    </f:facet>
                              </rich:datascroller>
                        </f:facet>
                    </rich:dataTable>
</h:form>

您可以参考official documentation 了解更多信息。

【讨论】：

【解决方案3】：

好的，我的解决方案有点不同。我使用 jQuery 查找生成的页码（这是一堆 TD）并更改了它们的 css：

<rich:datascroller id="tableScroller" renderIfSinglePage="false" for="projectPlanCreatetable" pageIndexVar="pageNo"
                    binding="#{ProjectPlanCreateControl.listAction.scroller}" page="#{ProjectPlanCreateControl.scrollerPage}">
                    <a4j:support event="onpagechange" action="#{ProjectPlanCreateControl.pageChanged}" reRender="visitedPages" 
                        oncomplete="markPages();"/>
                </rich:datascroller>

<h:inputHidden id="visitedPages" value="#{ProjectPlanCreateControl.visited}" />

<script type="text/javascript">

function markPages(){
var pages = document.getElementById('mainFrm:projectPlanCreatetable:visitedPages').value;
pagesArr = pages.split(",");

    for (var i=0; i<pagesArr.length; i++){
        jQuery('td.rich-datascr-inact').filter(function() {
          return jQuery(this).text() == pagesArr[i];
        }).css('color','red');
    }
}
</script>

在 bean 中：

private Integer scrollerPage;
private Set<Integer> visited = new HashSet<Integer>();

public String pageChanged(){
    visited.add(scrollerPage);
    return "";
}   

public String getVisited() {
    if (visited == null){
        return "";
    }

    String replaced = visited.toString().replace("[", "").replace("]", "").replace(" ", "");
    return replaced;
}

public void setVisited(String visited) {
}

public Integer getScrollerPage() {
    return scrollerPage;
}

public void setScrollerPage(Integer scrollerPage) {
    this.scrollerPage = scrollerPage;
}

【讨论】：