Is there any way to prevent an h:datatable from creating an empty row when the backing value is empty? More specifically: I have a collection of data to be displayed in 3 columns in an h:dataTable with column headers. The thead always needs to be displayed, regardless of if there are elements in the list. This works fine, but when no elements are in the list, a single, empty row/cell is created in the tbody. Is there a way to prevent this?
当支持值为空时,有没有办法阻止h:datatable创建一个空行?更具体地说:我有一组数据要显示在带有列标题的h:dataTable中的3列中。无论列表中是否有元素,都需要显示thead。这样可以正常工作,但是当列表中没有元素时,会在tbody中创建一个空行/单元格。有办法防止这种情况吗?
Thanks!
谢谢!
Sample method from backing bean. For testing i've tried returning both null or an empty list. Same result for both.
来自backing bean的示例方法。为了测试我尝试返回null或空列表。两者的结果相同。
public List<LocationsDecorator> getLocations() {
return null;
}
JSF fragment:
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>
Resulting HTML(The "<tr><td></td></tr>
" in the tbody is the problem):
产生的HTML(tbody中的“ ”是问题):
<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>
3 个解决方案
#1
5
Specify a separate style for an empty table. E.g.
为空表指定单独的样式。例如。
table.empty tbody td {
border: 0;
}
And add it conditionally.
并有条件地添加它。
<h:dataTable ... styleClass="locations #{empty component.value ? 'empty' : ''}">
#2
0
You might be able to avoid the column header disapearing if you instead wrap your method in an outputText tag
如果您将方法包装在outputText标记中,则可能可以避免列标题消失
Example:
例:
<h:column>
<!-- column header -->
<f:facet name="header">Address</f:facet>
<!-- row record -->
<h:outputText value="#{nearestLoc.adddress}" />
</h:column>
This way the column itself does not depend on the values
这样,列本身不依赖于值
#3
0
Thanks for BalusC's suggestion, but I tried it, it did not work. It may be other reasons result in. I fixed BalusC's code a little, it works now:
感谢BalusC的建议,但我尝试过,它没有用。可能是其他原因造成的。我稍微修改了BalusC的代码,它现在有效:
table.locations.empty tbody td {
border-color: rgba(0, 0, 0, 0);
}
#1
5
Specify a separate style for an empty table. E.g.
为空表指定单独的样式。例如。
table.empty tbody td {
border: 0;
}
And add it conditionally.
并有条件地添加它。
<h:dataTable ... styleClass="locations #{empty component.value ? 'empty' : ''}">
#2
0
You might be able to avoid the column header disapearing if you instead wrap your method in an outputText tag
如果您将方法包装在outputText标记中,则可能可以避免列标题消失
Example:
例:
<h:column>
<!-- column header -->
<f:facet name="header">Address</f:facet>
<!-- row record -->
<h:outputText value="#{nearestLoc.adddress}" />
</h:column>
This way the column itself does not depend on the values
这样,列本身不依赖于值
#3
0
Thanks for BalusC's suggestion, but I tried it, it did not work. It may be other reasons result in. I fixed BalusC's code a little, it works now:
感谢BalusC的建议,但我尝试过,它没有用。可能是其他原因造成的。我稍微修改了BalusC的代码,它现在有效:
table.locations.empty tbody td {
border-color: rgba(0, 0, 0, 0);
}