Empty h:dataTable in JSF renders empty row with invalid number of columns? - jsf

Question

I have the following JSF code which renders a table from a Bean which might be empty
<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>
problem is the above code renders the following HTML:
<tbody><tr><td></td></tr></tbody>
The above is wrong because it should render:
<tbody><tr><td></td><td></td></tr></tbody>
where the number of columns is two and not one! but even better it should render just:
<tbody></tbody>
So that DataTables js script recognizes there's no rows and shows a nice "Empty table".
Currently DataTables js script returns an error:
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
of course because it sees a row but with an incorrect number of columns.
Now using Primefaces p:dataTable produces even more boilerplate html code because the table is buried inside several div's and when an empty result is returned it produces a:
<tr class="ui-widget-content ui-datatable-empty-message">
<td class=" " colspan="4">No records found.</td>
</tr>
So again DataTables js (http://datatables.net/) finds a wrong number of columns.
Is there a way to tell primefaces what html code to output when no result is found?

Answer 1

Ok I finally found a workaround by using jQuery to check the html and remove the offending column, this is rather hacky but seems noone has any workaround and both standard JSF datatable and Primefaces datatable have the same issue.
<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>