Comment obtenir l'en-tête complexe dans Bootsfaces datable

Question

J'utilise Bootsfaces datatable pour afficher mes données. Cependant, je veux atteindre en-tête complexe comme indiqué ici: https://datatables.net/examples/basic_init/complex_header.html

J'ai essayé d'ajouter <th rowspan> et <th colspan> directement sous les facettes d'en-tête dans la première dataTableColumn, mais qui ont une ligne vide laide en haut.

J'ai également essayé d'ajouter toute la facette d'en-tête sous la balise <b:dataTable...>, avant le premier <b:dataTableColumn>, mais ce code d'en-tête ne sera pas généré dans le code HTML. D'autres suggestions? Je ne veux pas passer à Primefaces ou Richfaces car mon framework a été corrigé.

Mon code qui essaie d'atteindre l'en-tête complexe ressemble ci-dessous:

<b:dataTable value="#{podStatusListBean.podStatusBeanList}" 
         var="podStatus" 
         id="podStatuses"> 
    <b:dataTableColumn footer-style='background-color:orange' 
         footer-styleclass="{podStatusListBean.footerVisibility}"> 
       <f:facet name="header"> 
        <tr> 
         <th rowspan="2">Name</th> 
         <th colspan="2">HR Information</th> 
         <th colspan="3">Contact</th> 
        </tr> 
       </f:facet> 
    ... 

Answer 1

Ceci est une nouvelle fonctionnalité, nous avons ajouté à la prochaine version BootsFaces (probablement 1.2). Au 15 juin 2017, la version actuelle de BootsFaces 1.1.1 ne prend en charge que les en-têtes complexes par colonne.

têtes complexes par colonne (pris en charge depuis BootsFaces 0.8.0): Ajouter une facettes d'en-tête à la <b:dataTableColumn />, à peu près la façon dont vous avez essayé. Mais gardez à l'esprit que BootsFaces génère déjà les tags <tr> et <th>, vous pouvez donc les imbriquer une seconde fois. Mais vous pouvez faire quelque chose comme ceci:

<b:dataTableColumn> 
    <f:facet name="header"> 
    <ul 
     style="margin-bottom: 0; list-style-type: none; padding-left: 0"> 
     <li>Price</li> 
     <li>Engine Power</li> 
     </ul> 
    </f:facet> 
     € #{car.price} 
     <br /> 
     #{car.enginePowerKW} KW (#{car.enginePower} hp) 
     </b:dataTableColumn> 
</b:dataTable> 

têtes plus complexes (seront pris en charge en commençant par BootsFaces 1.2.0): Ajouter une facette d'en-tête à la balise <b:dataTable /> environnante. Dans ce cas, vous êtes responsable de la définition du nombre correct d'en-têtes de tableau. Si vous en sautez un, vous serez récompensé par une erreur JavaScript. Dans de nombreux cas, il passera même inaperçu, mais l'initialisation de la datatable est incomplète, donc vous préférez être prudent.

<b:dataTable value="#{carPool.carPool}" 
      var="car" 
      page-length="5" 
      page-length-menu="5,10,20"> 
    <f:facet name="header"> 
    <tr> 
     <th rowspan="2">Car</th> 
     <th colspan="2">Appearance</th> 
     <th colspan="2">Technical Data</th> 
    </tr> 
    <tr> 
     <th>Color</th> 
     <th>Year</th> 
     <th>Price</th> 
     <th>Power</th> 
</tr> 
    </f:facet> 
    <b:dataTableColumn> 
     #{car.brand} #{car.type} 
    </b:dataTableColumn> 
    <b:dataTableColumn value="#{car.color}" /> 
    <b:dataTableColumn value="#{car.year}" order="asc" /> 
    <b:dataTableColumn value="#{car.price}" /> 
    <b:dataTableColumn value="#{car.enginePower}"/> 
</b:dataTable>