Question

我有以下JSF代码，它从Bean中呈现一个可能为空的表

<h:dataTable value="#{recController.currentRecList}" var="rec" styleClass="display" id="rec">
   <h:column>
     <f:facet name="header">
          <h:outputText value="#{msg['rec.name']}"/>
     </f:facet>
     #{rec.name}
   </h:column>
   <h:column>
     <f:facet name="header">
        <h:outputText value="#{msg['rec.notes']}"/>
     </f:facet>
     #{rec.notes}
  </h:column>
</h:dataTable>

问题是上面的代码呈现以下HTML：

<tbody><tr><td></td></tr></tbody>

以上是错误的，因为它应该呈现：

<tbody><tr><td></td><td></td></tr></tbody>

其中列数为2而不是1列！但更好的是它应该只渲染：

<tbody></tbody>

因此DataTables js脚本识别出没有行并显示一个漂亮的“空表” 目前，DataTables js脚本返回错误：

DataTables warning: table id=rec - Requested unknown parameter '1' for row 0. 
For more information about this error, please see http://datatables.net/tn/4

当然因为它看到一行但列数不正确。

warning datatables

现在使用Primefaces p：dataTable产生更多的样板html代码，因为该表被隐藏在几个div中，当返回空结果时，它产生一个：

<tr class="ui-widget-content ui-datatable-empty-message">
<td class=" " colspan="4">No records found.</td>
</tr>

因此DataTables js（http://datatables.net/）找到错误的列数。有没有办法告诉primefaces什么html代码输出时没有找到结果？

Answer 1

好的，我终于通过使用jQuery来检查html并删除有问题的列找到了一个解决方法，这是相当hacky但似乎没有任何解决方法，标准JSF数据表和Primefaces数据表都有相同的问题。

<script type="text/javascript" charset="utf-8">
                var oTable;
                jQuery(document).ready(function() {
                    /* JSF has a bug where in the case of an empty list it generates a table with
                     * a single row and a single column no matter how many columns where defined.
                     * This breaks DataTables script so we manually delete this offending row if 
                     * it is present */
                    length = jQuery("#myTable tbody tr").first().children().length;
                    alert(length);
                    if(length===1)
                    {
                        jQuery("#myTable tbody").html("");
                    }
                    oTable = jQuery('#myTable').dataTable({
                        "sDom": 'TRlfrCtip',
                        "oTableTools": {
                            "sSwfPath": "#{resource['tabletools/swf/copy_csv_xls_pdf.swf']}"
                        }
                    });
                    //fnClickAddRow();
                });
            </script>

清空h：JSF中的dataTable呈现空行数无效的列？

1 个答案: