Expand collapse of table rows in Datatable JSF

I have been trying to achieve this functionality of expand/collapse of table rows using core JSF and also I have to preserve the sorting. Is there a way in co开发者_运维百科re JSF where I can achieve this functionality?

If you insist in using reference implementation only, then you can't go around using a nested h:dataTable and/or h:panelGroup and a good shot of CSS to get it aligned nicely. You can then use JavaScript the smart way to show/hide row details.

Here's a basic kickoff example:

<h:dataTable value="#{bean.orders}" var="order">
    <h:column>
        <h:panelGrid columns="3">
            <h:graphicImage id="expand" value="expand.gif" onclick="toggleDetails(this);" />
            <h:outputText value="#{order.id}" />
            <h:outputText value="#{order.name}" />
        </h:panelGrid>
        <h:dataTable id="details" value="#{order.details}" var="detail" style="display: none;">
            <h:column><h:outputText value="#{detail.date}" /></h:column>
            <h:column><h:outputText value="#{detail.description}" /></h:column>
            <h:column><h:outputText value="#{detail.quantity}" /></h:column>
        </h:dataTable>
    </h:column>
</h:dataTable>

The toggleDetails() function can look like (note that it takes JSF generated client ID into account):

function toggleDetails(image) {
    var detailsId = image.id.substring(0, image.id.lastIndexOf(':')) + ':details';
    var details = document.getElementById(detailsId);
    if (details.style.display == 'none') {
        details.style.display = 'block';
        image.src = 'collapse.gif';
    } else {
        details.style.display = 'none';
        image.src = 'expand.gif';
    }
}

I don't think you can do this with 'core' JSF (by which I assume you mean using only the reference implementation).

As I understand it, you can accomplish subtables with RichFaces subTable

You can also do a similar thing with IceFaces - see the component showcase (it's under Table -> Expandable Table). However either of these would require you adding and setting up another library (RichFaces or IceFaces) which is probably not what you want.

Simple expandable table with RichFaces

We can do Simple expandable table with RichFaces and the code is given below...

<h:form>
   <rich:dataTable value="#{wonderBean.wonders}" var="wonder">
      <rich:column colspan="3">
         <f:facet name="header">Wonder</f:facet>
     <h:outputText value="#{wonder.name}" />
     <a4j:commandLink id="link" value="#{!wonderBean.show?'[+]':'[-]'}"
        reRender="link">
     <a4j:actionparam name="val" value="#{!wonderBean.show}"
        assignTo="#{wonderBean.show}" />
     </a4j:commandLink>
      </rich:column>
      <rich:columnGroup>
         <rich:column>
        <a4j:outputPanel ajaxRendered="true">
             <rich:dataTable value="#{wonder.details}" var="detail"
            rendered="#{wonderBean.show}" style="border: 0px">
                <rich:column>
            <f:facet name="header">Location</f:facet>
            <h:outputText value="#{detail.location}" />
            </rich:column>
            <rich:column>
               <f:facet name="header">Image</f:facet>
               <h:graphicImage value="#{detail.imageUrl}" />
            </rich:column>
         </rich:dataTable>
          </a4j:outputPanel>
       </rich:column>
        </rich:columnGroup>
     </rich:dataTable>
</h:form>