rich:dataTable paging - marking visited pages of rich:datascroller

开发者_如何转开发

Is it possible to mark visited page numbers in the paging footer of rich:dataTable? If so, how exactly? The footer is rich:datascroller.

---

You can use the <f:facet name="pages"> facet inside your rich:datascroller to display the individual page links your own way. In the backing bean record the visited pages, apply a css class to the visited pages.

See an example here: http://livedemo.exadel.com/richfaces-demo/richfaces/dataTableScroller.jsf?tab=scrollerfacets (click on view source)

---

Do you mean to display the page number for the current viewing page ?? If yes , you can do it using the <rich:datascroller> 's pageIndexVar attribute , which defines the page number of the current viewing page. On the other hand , pagesVar attribute defines the total number of page in the <rich:datascroller>.

Please note these 2 attributes must be used inside the <f:facet> whose name is called pages . Besides , please make sure that the whole <rich:datascroller> is enclosed by the <h:form>. For example:

     <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>

You can refer to the official documentation for more information.

---

OK, my solution was a bit different. I used jQuery to find the generated page numbers (it's a bunch of TD's) and changed their 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>

and in the 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;
}