Jak zaimplementować numerację wierszy w h: dataTable
Mam tę tabelę JSF z podziałem na strony.
<code><?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> </code>
Stworzyłem prosty przykład liczby wierszy, aby przedstawić liczbę wierszy z bardzo prostą tabelą html. Do drugiej tabeli działa paginacja, ale nie wiem, jak ją wdrożyćui:repeat
wh:dataTable
w celu wdrożenia liczby wierszy. Jak mogę to wdrożyć?