java - 如何将行编号实现到 h :dataTable-6ren

java - 如何将行编号实现到 h :dataTable

转载作者：搜寻专家更新时间：2023-11-01 02:14:11

我有这个带分页的 JSF 表。

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

我创建了简单的行计数示例，只是为了用非常简单的 html 表表示行数。在第二个表中，分页有效，但我不知道如何将 ui:repeat 实现到 h:dataTable 中以实现行计数。我该如何实现？

最佳答案

使用UIData#getRowIndex() .

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

关于java - 如何将行编号实现到 h :dataTable，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/10300514/

文章推荐： Javascript - deepEqual 比较

文章推荐： swift - Reactive Cocoa/Reactive Swift - Swift 3.0 缺少方法

文章推荐： javascript - 有没有办法在 OpenLayers 3 中禁用旋转？

datatables - dataTable() 与 DataTable() - 为什么有区别以及如何让它们一起工作？
该插件的绝大多数文档表明您可以使用对其进行初始化 $('#example').dataTable(); 但是http://www.datatables.net/examples/api/multi_
datatables - 如何在列中实现新行(DataTables)
我有一个 SQL 查询，它获取一些数据(dbtable 表中的语言列)。查询使用 GROUP_CONCAT，因此一个单元格有多个结果，例如 "Ajax, jQuery, HTML, CSS". 我想要
datatables - DataTables 如何确定列类型
我有一个由 jQuery DataTables 增强的动态表，它显示一个与此类似的自定义对象 example . JSON: { "data": [ { "name": "Ti
c# - 我们如何将一个 DataTable 的列数据复制到另一个 DataTable，即使 DataTable 之间的列名不同？
我有两个数据表。首先是 DataTable NameAddressPhones = new DataTable(); 具有三列姓名、地址和电话号码。但我只想要两列姓名和地址数据，所以我想将这些列(包含
datatables - 将处理语言放在 DataTable 之上
有没有办法将“处理...”语言放在 DataTable 对象的顶部而不是垂直中间？如果我有一张长 table ，它会隐藏在页面之外，因为它的默认位置在中间。 $('#example').dataTab
datatables - 防止 DataTables 自定义过滤器影响页面上的所有表
当我们向 DataTables 添加自定义过滤器时: $.fn.dataTable.ext.search.push(function(settings, data, dataIndex) { ..
datatables - 我们如何更改 DataTables 中搜索字段的宽度
我可以更改 dataTables 中搜索文本字段的宽度吗？我现在正在编写以下代码，但它不起作用。 $('#example').dataTable() .columnFilter(
jquery-datatables - DataTables 使分页和显示计数出现在顶部
使用 DataTables plugin 时如何使分页和 Showing 1 to 8 of 8 entries 出现在顶部而不是底部？谢谢最佳答案每个数据表控件都以唯一的 id 命名计划之后
Angular DataTables : $(. ..).DataTable 不是函数
Angular 版本:6.0.4 ~ 节点版本:10.4.1 ~ NPM 版本:6.1.0 我看到这个问题被问了很多次，但没有回答。关注这些后instructions to install angu
datatables - 如何在单击按钮时在 DataTable 中设置单元格值
当单击外部按钮时，我正在尝试使用 DataTable(新版本)修改单元格值。我现在有以下内容: $(document).on('click', '.dropdown-menu li a', funct
datatables - jQuery dataTables 页面信息
引用:http://datatables.net/reference/api/page.info() 我正在尝试获取 ajax POST 生成的 jQuery DataTable 的当前分页信息。使
datatables - 提示页号jQuery dataTables 页面更改事件
以下对我有用: $('#datatable').on('page.dt', function() { alert("changed"); }); 每当我更改页面时，都会显示警报。但是如果我想警
datatables - Jquery DataTables 排除具有特定类的行
我有一个 HTML 表，我在其中应用了 DataTables 函数。我使用表的第一行并将"template"类应用为我的模板行。然后选择此格式并使用 JSON feed 填充表中的所有行。问题是 Da
datatables - 如何防止 DataTables 根据过时的保存状态显示或隐藏列
我有一个由 DataTables 1.10 驱动的表。过滤已打开。当我在下面谈论“做搜索”时，我指的是使用该表的过滤功能。问题描述关闭 stateSave 一切正常。但是，当 stateSave
datatables - jQuery dataTables - 清除列上的搜索
看看这个例子，http://www.datatables.net/examples/api/multi_filter_select.html ，它使用 DataTable API 中的 columns
jQuery DataTables - 无法重新初始化 DataTable
我正在使用 jQuery DataTables 在 spring 4.x 应用程序中创建一个报表页面来呈现报表。通过 Jackson 消息转换器解析后，服务器返回以下对象。 { "data"
datatable - Primefaces dataTable 不刷新内容
我在刷新 Primesfaces 的延迟加载数据表时遇到了一些问题。我正在使用 3.0.M4。使用过滤器在您的示例中使用三个类。还尝试了仅使用延迟加载的示例，但随后未在 Controller 中重新
C# - DataTable 中的 DataTable
在 Blue Prism (BP) 中，有一种叫做 Collection 的东西，它基本上是 C# 中的 DataTable。在 BP 中，您可以在集合中拥有集合。我的问题是，您可以在 C# 的 Da
datatable - Flutter DataTable - 点击行
我正在使用 Flutter DataTables 来显示购物车中的商品列表。现在我想编辑任何选定行的数量。有没有办法获取用户点击的行信息？以下是我的DataTable的完整代码: class _Da
将 primefaces dataTable 与 org.primefaces.component.datatable.DataTable 绑定(bind)；
我有一个关于 primefaces 数据表组件的问题。我想将 DataTable 变量绑定(bind)到 p:dataTable，以便我能够从支持 bean 以编程方式操作第一个、行、rowsPerP

搜寻专家

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

java - 如何将行编号实现到 h :dataTable