How to implement row numbering into h:dataTable

Question

I have this JSF table with pagination.

<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<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">
    <h:head>
        <ui:insert name="header">           
            <ui:include src="header.xhtml"/>         
        </ui:insert>
        <script type="text/javascript" src="resources/js/jquery-1.7.2.min.js"></script>
    </h:head>
    <h:body>

        <h1><img src="resources/css/images/icon.png" alt="DX-57" /> History Center</h1>
        <!-- layer for black background of the buttons -->
        <div id="toolbar" style="margin: 0 auto; width:1180px; height:30px; position:relative;  background-color:black">
            <!-- Include page Navigation -->
            <ui:insert name="Navigation">           
                <ui:include src="Navigation.xhtml"/>         
            </ui:insert>

        </div>  

        <div id="logodiv" style="position:relative; top:35px; left:0px;"> 
            <h:graphicImage alt="Dashboard"  style="position:relative; top:-20px; left:9px;"  value="resources/images/logo_sessions.png" />
        </div>
        <div id="main" style="margin: 0 auto; width:1190px; height:700px; position:absolute;  background-color:transparent; top:105px">

            <div id="mainpage" style="margin: 0 auto; width:1190px; height:500px; position:absolute;  background-color:transparent; top:80px">

                <div id="settingsHashMap" style="width:750px; height:400px; position:absolute;  background-color:r; top:20px; left:1px">

                    <h:form id="form">


                        <!-- The sortable data table -->
                        <h:dataTable id="dataTable" value="#{SessionsController.dataList}" var="item">
                            <!-- Check box -->
                            <h:column>
                                <f:facet name="header">
                                    <h:outputText value="Select" />
                                </f:facet>
                               <h:selectBooleanCheckbox onclick="highlight(this)" value="#{SessionsController.selectedIds[dataItem.id]}" />
                            </h:column>
                            <h:column>
                                <f:facet name="header">
                                    <h:commandLink value="Account Session ID" actionListener="#{SessionsController.sort}">
                                        <f:attribute name="sortField" value="Account Session ID" />
                                    </h:commandLink>
                                </f:facet>
                                <h:outputText value="#{item.aSessionID}" />
                            </h:column>
                            <h:column>
                                <f:facet name="header">
                                    <h:commandLink value="User ID" actionListener="#{SessionsController.sort}">
                                        <f:attribute name="sortField" value="User ID" />
                                    </h:commandLink>
                                </f:facet>
                                <h:outputText value="#{item.userID}" />
                            </h:column>
                            <h:column>
                                <f:facet name="header">
                                    <h:commandLink value="Activity Start Time" actionListener="#{SessionsController.sort}">
                                        <f:attribute name="sortField" value="Activity Start Time" />
                                    </h:commandLink>
                                </f:facet>
                                <h:outputText value="#{item.activityStart}" />
                            </h:column>
                            <h:column>
                                <f:facet name="header">
                                    <h:commandLink value="Activity End Time" actionListener="#{SessionsController.sort}">
                                        <f:attribute name="sortField" value="Activity End Time" />
                                    </h:commandLink>
                                </f:facet>
                                <h:outputText value="#{item.activityEnd}" />
                            </h:column>
                            <h:column>
                                <f:facet name="header">
                                    <h:commandLink value="Activity" actionListener="#{SessionsController.sort}">
                                        <f:attribute name="sortField" value="Activity" />
                                    </h:commandLink>
                                </f:facet>
                                <h:outputText value="#{item.activity}" />
                            </h:column>
                        </h:dataTable>

                        <f:verbatim><br/><hr /><br/></f:verbatim>


                        <table>
                            <tr>
                                <td>№</td>
                                <td>Select</td>
                                <td>Account Session ID</td>
                                <td>User ID</td>
                                <td>Activity Start Time</td>
                                <td>Activity End Time</td>
                                <td>Activity</td>
                            </tr>

                            <ui:repeat value="#{SessionsController.dataList}" var="i" varStatus="status">
                                <tr>
                                    <td>#{status.index + 1 + i.firstRow}</td>
                                    <td><h:selectBooleanCheckbox  value="#{i.selected}" /></td>
                                    <td><h:outputText value="#{i.aSessionID}" /></td>
                                    <td><h:outputText value="#{i.userID}" /></td>
                                    <td><h:outputText value="#{i.activityStart}" /></td>
                                    <td><h:outputText value="#{i.activityEnd}" /></td>
                                    <td><h:outputText value="#{i.activity}" /></td>
                                </tr>
                            </ui:repeat>
                        </table>
                        <!-- The paging buttons -->
                        <h:commandButton value="first" action="#{SessionsController.pageFirst}"
                                         disabled="#{SessionsController.firstRow == 0}" />
                        <h:commandButton value="prev" action="#{SessionsController.pagePrevious}"
                                         disabled="#{SessionsController.firstRow == 0}" />
                        <h:commandButton value="next" action="#{SessionsController.pageNext}"
                                         disabled="#{SessionsController.firstRow + SessionsController.rowsPerPage >= SessionsController.totalRows}" />
                        <h:commandButton value="last" action="#{SessionsController.pageLast}"
                                         disabled="#{SessionsController.firstRow + SessionsController.rowsPerPage >= SessionsController.totalRows}" />
                        <h:outputText value="Page #{SessionsController.currentPage} / #{SessionsController.totalPages}" />
                        <br />

                        <!-- The paging links -->
                        <ui:repeat value="#{SessionsController.pages}" var="page">
                            <h:commandLink value="#{page}" actionListener="#{SessionsController.page}"
                                           rendered="#{page != SessionsController.currentPage}" />
                            <h:outputText value="#{page}" escape="false"
                                          rendered="#{page == SessionsController.currentPage}" />
                        </ui:repeat>
                        <br />

                        <!-- Set rows per page -->
                        <h:outputLabel for="rowsPerPage" value="Rows per page" />
                        <h:inputText id="rowsPerPage" value="#{SessionsController.rowsPerPage}" size="3" maxlength="3" />
                        <h:commandButton value="Set" action="#{SessionsController.pageFirst}" />
                        <h:message for="rowsPerPage" errorStyle="color: red;" />

                    </h:form>                  

                </div>   

                <div id="settingsdivb" style="width:350px; height:400px; position:absolute;  background-color:transparent; top:20px; left:800px">

                </div>   
            </div>  
        </div>

        <script type="text/javascript">
              $("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');
            }        
        </script>

    </h:body>
</html>

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 ui:repeat into the h:dataTable in order to implement row count. How I can implement this?

BalusC · Accepted Answer · 2012-04-24T15:16:32.003

6

Use UIData#getRowIndex().

<h:dataTable binding="#{table}" ...>
    <h:column>
        #{table.rowIndex + SessionsController.firstRow + 1}
    </h:column>
    ...
</h:dataTable>

edited Apr 24 '12 at 15:16

answered Apr 24 '12 at 15:10

BalusC

1,082,665
372
3,610
3,555

1

Yes but I have a custom pagination. What will happen if I open the second page from the pagination? I will start from 1 again? – Peter Penzov Apr 24 '12 at 15:15
1

Add `firstRow` of the page to it then. – BalusC Apr 24 '12 at 15:16
1

I understand what do you mean. I edited the code this way: http://pastebin.com/3Dxbref4 Now it works much more simple. Thank you! – Peter Penzov Apr 24 '12 at 15:22

score 0 · Answer 2 · answered Apr 24 '12 at 15:06

Im not sure I understand correctly. You just want the rows numbered?

However, I don't think it's as easy as you might think it is. h:dataTable actually doesn't support this. And mixing h:dataTable and ui:repeat seems like the completely wrong way to do this (if I understand correctly).

You could:

Use t:dataTable (from Tomahawk: http://myfaces.apache.org/tomahawk/index.html). There you can use the rowIndexVar Attribute, like so:

<t:dataTable rowIndexVar="row" value="#{someBean.value}">  
    <h:column>  
        <h:outputText value="#{row + 1}"/>  
    </h:column>  
</t:dataTable>

Alternativly, change your data model and provide the index inside there. Or use a wrapper class:
```
public class DataWrapper{
    private int index;
    private Object model;
    // getter and setter
    ...
}
```
Then pass a list of DataWrapper to JSF, instead of your model directly. You need to set the index somewhere in your service layer first, of course.

I hope this helps. Let me know if you need further assistance.

`` is unnecessary. `DataWrapper` is not DRY, there exist already the `javax.faces.model.DataModel` which has also a `getRowIndex()`. It's been used by `UIData` component under the covers. — BalusC, Apr 24 '12 at 15:12
I will ask you this way: I have this variable "firstRow", I get it from the pagination. Every time this variable contains the number of the first row. So I have only to do this in one row: but the problem is that I get every time 10 + 1 on the JSF page — Peter Penzov, Apr 24 '12 at 15:14

How to implement row numbering into h:dataTable

2 Answers2

Linked