JSF h:dataTable 在没有记录时创建单个空单元格答案

【问题标题】：JSF h:dataTable creates single empty cell when no recordsJSF h:dataTable 在没有记录时创建单个空单元格
【发布时间】：2012-11-22 16:33:13
【问题描述】：

当支持值为空时，是否有任何方法可以防止 h:datatable 创建空行？进一步来说：我有一组数据要显示在带有列标题的 h:dataTable 中的 3 列中。无论列表中是否有元素，都需要显示标题。这很好用，但是当列表中没有元素时，会在 tbody 中创建一个空行/单元格。有没有办法防止这种情况？

谢谢！

支持 bean 的示例方法。为了测试，我尝试返回 null 或空列表。两者的结果相同。

    public List<LocationsDecorator> getLocations() {
    return null;
}

JSF 片段：

<h:dataTable styleClass="locations" id="locations1"
    var="nearestLoc" value="#{confirmationBean.locations}">
    <h:column>
        <!-- column header -->
        <f:facet name="header">Address</f:facet>
        <!-- row record -->
            #{nearestLoc.adddress}
        </h:column>
    <h:column>
        <!-- column header -->
        <f:facet name="header">Distance</f:facet>
        <!-- row record -->
            #{nearestLoc.distance}
        </h:column>
    <h:column>
        <!-- column header -->
        <f:facet name="header">Hours of Operation</f:facet>
        <!-- row record -->
        <h:dataTable styleClass="locations" var="data"
            value="#{nearestLoc.hoursOfOperation}">
            <h:column>     
                #{data}
                </h:column>
        </h:dataTable>

    </h:column>

</h:dataTable>

生成的 HTML（tbody 中的“<tr><td></td></tr>”是问题所在）：

<table id="contact:locations1" class="locations">
<thead>
<tr>
<th scope="col">Address</th>
<th scope="col">Distance</th>
<th scope="col">Hours of Operation</th>
</tr>
</thead>
<tbody>
<tr><td></td></tr></tbody>
</table>

【问题讨论】：

您忘记说明问题的确切原因，因此无法提出解决问题的答案。
在表格单元格应用边框或bkgnd颜色等样式时会导致问题。

标签： html jsf datatable

【解决方案1】：

如果您将方法包装在 outputText 标记中，或许可以避免列标题消失

例子：

  <h:column>
    <!-- column header -->
    <f:facet name="header">Address</f:facet>
    <!-- row record -->
       <h:outputText value="#{nearestLoc.adddress}" />
    </h:column>

这样列本身不依赖于值

【讨论】：

【解决方案2】：

为空表指定单独的样式。例如

table.empty tbody td {
    border: 0;
}

并有条件地添加它。

<h:dataTable ... styleClass="locations #{empty component.value ? 'empty' : ''}">

【讨论】：

我可以在某个地方找到一个例子吗？
@sans：根据目前提供的信息创建自己。

【解决方案3】：

感谢BalusC的建议，但我试过了，还是不行。可能是其他原因导致的。我稍微修复了 BalusC 的代码，它现在可以工作了：

table.locations.empty tbody td {
    border-color: rgba(0, 0, 0, 0);
}

【讨论】：

您可以对现有答案提出改进建议。
当有一个更强大的 CSS 选择器来指定边框时它会失败。该部分与 JSF 无关，仅与基本 CSS 相关。