richfaces DataScroller not working

Question

I am trying to implement datascroller in richfaces 3.1.4 with JSF 1.2 but the datascroller is not working properly though it is showing the no of pages.Here is the code :

<rich:dataTable width="150 px" id="listOfServiceId" rows="#{posManageOrderBean.count}" columnClasses="col" 
        value="#{posManageOrderBean.customerProjectServiceIds}" var="serviceIDs" 
        headerClass="dr-stglpnl-h"  rowClasses="evenrow,oddrow">
            <h:column>
                <f:facet name="header">
                    <h:outputText value="Service Id" rendered="true" />
                </f:facet>

                <h:commandLink value="#{serviceIDs.serviceID}" action="#{posManageOrderBean.showAllServiceIdAttr}" > 
                    <f:param name="serviceId" value="#{serviceIDs.serviceID}"> </f:param>
                </h:commandLink>
            </h:column>
            <h:column>
                <f:facet name="header">
                    <h:outputText value="Copf Id" rendered="true" />
                </f:facet>

                <h:outputText value="#{serviceIDs.copfID}" rendered="true" />
            </h:column>
            <h:column>
                <f:facet name="header">
                    <h:outputText value="Service Id" rendered="true" />
                </f:facet>

                <h:outputText value="#{serviceIDs.customerProjectName}" rendered="true" />
            </h:column>
            <h:column>
                <f:facet name="header">
                    <h:outputText value="Service Id" rendered="true" />
                </f:facet>

                <h:outputText value="#{serviceIDs.customerName}" rendered="true" />
            </h:column>
            <f:facet name="footer">
                <h:panelGrid>
                    <rich:datascroller  maxPages="20" id="sc1" for="listOfServiceId" reRender="listOfServiceId"></rich:datascroller>
                </h:panelGrid>
            </f:facet>
        </rich:dataTable>