title: How to implement row numbering into h:dataTable
body: <p>I have this JSF table with pagination. </p>
  
  <pre class="lang-xml prettyprint-override"><code>&lt;?xml version='1.0' encoding='UTF-8' ?&gt;
  &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"    
        xmlns:h="http://java.sun.com/jsf/html"
        xmlns:f="http://java.sun.com/jsf/core"
        xmlns:ui="http://java.sun.com/jsf/facelets"&gt;
      &lt;h:head&gt;
          &lt;ui:insert name="header"&gt;           
              &lt;ui:include src="header.xhtml"/&gt;         
          &lt;/ui:insert&gt;
          &lt;script type="text/javascript" src="resources/js/jquery-1.7.2.min.js"&gt;&lt;/script&gt;
      &lt;/h:head&gt;
      &lt;h:body&gt;
  
          &lt;h1&gt;&lt;img src="resources/css/images/icon.png" alt="DX-57" /&gt; History Center&lt;/h1&gt;
          &lt;!-- layer for black background of the buttons --&gt;
          &lt;div id="toolbar" style="margin: 0 auto; width:1180px; height:30px; position:relative;  background-color:black"&gt;
              &lt;!-- Include page Navigation --&gt;
              &lt;ui:insert name="Navigation"&gt;           
                  &lt;ui:include src="Navigation.xhtml"/&gt;         
              &lt;/ui:insert&gt;
  
          &lt;/div&gt;  
  
          &lt;div id="logodiv" style="position:relative; top:35px; left:0px;"&gt; 
              &lt;h:graphicImage alt="Dashboard"  style="position:relative; top:-20px; left:9px;"  value="resources/images/logo_sessions.png" /&gt;
          &lt;/div&gt;
          &lt;div id="main" style="margin: 0 auto; width:1190px; height:700px; position:absolute;  background-color:transparent; top:105px"&gt;
  
              &lt;div id="mainpage" style="margin: 0 auto; width:1190px; height:500px; position:absolute;  background-color:transparent; top:80px"&gt;
  
                  &lt;div id="settingsHashMap" style="width:750px; height:400px; position:absolute;  background-color:r; top:20px; left:1px"&gt;
  
                      &lt;h:form id="form"&gt;
  
  
                          &lt;!-- The sortable data table --&gt;
                          &lt;h:dataTable id="dataTable" value="#{SessionsController.dataList}" var="item"&gt;
                              &lt;!-- Check box --&gt;
                              &lt;h:column&gt;
                                  &lt;f:facet name="header"&gt;
                                      &lt;h:outputText value="Select" /&gt;
                                  &lt;/f:facet&gt;
                                 &lt;h:selectBooleanCheckbox onclick="highlight(this)" value="#{SessionsController.selectedIds[dataItem.id]}" /&gt;
                              &lt;/h:column&gt;
                              &lt;h:column&gt;
                                  &lt;f:facet name="header"&gt;
                                      &lt;h:commandLink value="Account Session ID" actionListener="#{SessionsController.sort}"&gt;
                                          &lt;f:attribute name="sortField" value="Account Session ID" /&gt;
                                      &lt;/h:commandLink&gt;
                                  &lt;/f:facet&gt;
                                  &lt;h:outputText value="#{item.aSessionID}" /&gt;
                              &lt;/h:column&gt;
                              &lt;h:column&gt;
                                  &lt;f:facet name="header"&gt;
                                      &lt;h:commandLink value="User ID" actionListener="#{SessionsController.sort}"&gt;
                                          &lt;f:attribute name="sortField" value="User ID" /&gt;
                                      &lt;/h:commandLink&gt;
                                  &lt;/f:facet&gt;
                                  &lt;h:outputText value="#{item.userID}" /&gt;
                              &lt;/h:column&gt;
                              &lt;h:column&gt;
                                  &lt;f:facet name="header"&gt;
                                      &lt;h:commandLink value="Activity Start Time" actionListener="#{SessionsController.sort}"&gt;
                                          &lt;f:attribute name="sortField" value="Activity Start Time" /&gt;
                                      &lt;/h:commandLink&gt;
                                  &lt;/f:facet&gt;
                                  &lt;h:outputText value="#{item.activityStart}" /&gt;
                              &lt;/h:column&gt;
                              &lt;h:column&gt;
                                  &lt;f:facet name="header"&gt;
                                      &lt;h:commandLink value="Activity End Time" actionListener="#{SessionsController.sort}"&gt;
                                          &lt;f:attribute name="sortField" value="Activity End Time" /&gt;
                                      &lt;/h:commandLink&gt;
                                  &lt;/f:facet&gt;
                                  &lt;h:outputText value="#{item.activityEnd}" /&gt;
                              &lt;/h:column&gt;
                              &lt;h:column&gt;
                                  &lt;f:facet name="header"&gt;
                                      &lt;h:commandLink value="Activity" actionListener="#{SessionsController.sort}"&gt;
                                          &lt;f:attribute name="sortField" value="Activity" /&gt;
                                      &lt;/h:commandLink&gt;
                                  &lt;/f:facet&gt;
                                  &lt;h:outputText value="#{item.activity}" /&gt;
                              &lt;/h:column&gt;
                          &lt;/h:dataTable&gt;
  
                          &lt;f:verbatim&gt;&lt;br/&gt;&lt;hr /&gt;&lt;br/&gt;&lt;/f:verbatim&gt;
  
  
                          &lt;table&gt;
                              &lt;tr&gt;
                                  &lt;td&gt;№&lt;/td&gt;
                                  &lt;td&gt;Select&lt;/td&gt;
                                  &lt;td&gt;Account Session ID&lt;/td&gt;
                                  &lt;td&gt;User ID&lt;/td&gt;
                                  &lt;td&gt;Activity Start Time&lt;/td&gt;
                                  &lt;td&gt;Activity End Time&lt;/td&gt;
                                  &lt;td&gt;Activity&lt;/td&gt;
                              &lt;/tr&gt;
  
                              &lt;ui:repeat value="#{SessionsController.dataList}" var="i" varStatus="status"&gt;
                                  &lt;tr&gt;
                                      &lt;td&gt;#{status.index + 1 + i.firstRow}&lt;/td&gt;
                                      &lt;td&gt;&lt;h:selectBooleanCheckbox  value="#{i.selected}" /&gt;&lt;/td&gt;
                                      &lt;td&gt;&lt;h:outputText value="#{i.aSessionID}" /&gt;&lt;/td&gt;
                                      &lt;td&gt;&lt;h:outputText value="#{i.userID}" /&gt;&lt;/td&gt;
                                      &lt;td&gt;&lt;h:outputText value="#{i.activityStart}" /&gt;&lt;/td&gt;
                                      &lt;td&gt;&lt;h:outputText value="#{i.activityEnd}" /&gt;&lt;/td&gt;
                                      &lt;td&gt;&lt;h:outputText value="#{i.activity}" /&gt;&lt;/td&gt;
                                  &lt;/tr&gt;
                              &lt;/ui:repeat&gt;
                          &lt;/table&gt;
                          &lt;!-- The paging buttons --&gt;
                          &lt;h:commandButton value="first" action="#{SessionsController.pageFirst}"
                                           disabled="#{SessionsController.firstRow == 0}" /&gt;
                          &lt;h:commandButton value="prev" action="#{SessionsController.pagePrevious}"
                                           disabled="#{SessionsController.firstRow == 0}" /&gt;
                          &lt;h:commandButton value="next" action="#{SessionsController.pageNext}"
                                           disabled="#{SessionsController.firstRow + SessionsController.rowsPerPage &gt;= SessionsController.totalRows}" /&gt;
                          &lt;h:commandButton value="last" action="#{SessionsController.pageLast}"
                                           disabled="#{SessionsController.firstRow + SessionsController.rowsPerPage &gt;= SessionsController.totalRows}" /&gt;
                          &lt;h:outputText value="Page #{SessionsController.currentPage} / #{SessionsController.totalPages}" /&gt;
                          &lt;br /&gt;
  
                          &lt;!-- The paging links --&gt;
                          &lt;ui:repeat value="#{SessionsController.pages}" var="page"&gt;
                              &lt;h:commandLink value="#{page}" actionListener="#{SessionsController.page}"
                                             rendered="#{page != SessionsController.currentPage}" /&gt;
                              &lt;h:outputText value="#{page}" escape="false"
                                            rendered="#{page == SessionsController.currentPage}" /&gt;
                          &lt;/ui:repeat&gt;
                          &lt;br /&gt;
  
                          &lt;!-- Set rows per page --&gt;
                          &lt;h:outputLabel for="rowsPerPage" value="Rows per page" /&gt;
                          &lt;h:inputText id="rowsPerPage" value="#{SessionsController.rowsPerPage}" size="3" maxlength="3" /&gt;
                          &lt;h:commandButton value="Set" action="#{SessionsController.pageFirst}" /&gt;
                          &lt;h:message for="rowsPerPage" errorStyle="color: red;" /&gt;
  
                      &lt;/h:form&gt;                  
  
                  &lt;/div&gt;   
  
                  &lt;div id="settingsdivb" style="width:350px; height:400px; position:absolute;  background-color:transparent; top:20px; left:800px"&gt;
  
                  &lt;/div&gt;   
              &lt;/div&gt;  
          &lt;/div&gt;
  
          &lt;script type="text/javascript"&gt;
                $("tr").not(':first').hover(
                function () {
                  $(this).css("background","#707070");
                }, 
                function () {
                  $(this).css("background","");
                }
              );              
  
              function highlight(param) {  
              var row = jQuery(param).parent().parent().children();
                  row.toggleClass('highlited');
              }        
          &lt;/script&gt;
  
      &lt;/h:body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>I created simple row count example just to represent the number of the row with very simple html table. Into the second table the pagination works but I don't know how to implement <code>ui:repeat</code> into the <code>h:dataTable</code> in order to implement row count. How I can implement this?</p>