Question

I have dataTable in my page. Initially I want it to be hidden, and show after fetching data by AJAX request. I know how to fetch data and put into table, but I don’t know how to show table if it is hidden. Here is the code:

<h:commandButton value="aa">
  <f:ajax execute="from to validTo" render="transportOffers"/>
</h:commandButton>
<p:dataTable id="transportOffers" value="${cargoOffer.transportsForCargo}" var="transport">
  <p:column>
    <h:outputText value="${transport.company}"/>
  </p:column>
</p:dataTable>

Table is visible initially, even if it is empty. If I set rendered="false" it is invisible, and remains invisible also after AJAX request.

How can I make it hidden initially, and to show up after populating with data?

Answer 1

You could try having the dataTable to render conditionally based on the size of the list:

rendered = "#{cargoOffer.transportsForCargo.size() != 0}"