Как добиться сложного заголовка в datatable Bootsfaces

Question

Я использую Bootsfaces Datatable для отображения моих данных. Однако я хочу получить сложный заголовок, как показано здесь: https://datatables.net/examples/basic_init/complex_header.html

Я пытался добавить <th rowspan> а также <th colspan> непосредственно под фасетом заголовка в первом dataTableColumn, но в верхней части уродливая пустая строка.

Я также попытался добавить весь фасет заголовка под <b:dataTable...> тэг, перед кулаком <b:dataTableColumn>, но этот код заголовка не будет сгенерирован в HTML. Любые другие предложения? Я не хочу переключаться на простые или richfaces, поскольку моя структура была исправлена.

Мой код, который пытается получить сложный заголовок, выглядит следующим образом:

<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

Это новая функция, которую мы добавили в следующую версию BootsFaces (вероятно, 1.2). По состоянию на 15 июня 2017 г. текущая версия BootsFaces 1.1.1 поддерживает сложные заголовки только для каждого столбца.

Сложные заголовки на столбец (поддерживается начиная с BootsFaces 0.8.0): добавление фасетов заголовка к <b:dataTableColumn />в значительной степени, как вы пытались. Но имейте в виду, что BootsFaces уже генерирует <tr> а также <th> теги, так что вы можете вкладывать их во второй раз. Но вы можете сделать что-то вроде этого:

<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>

Более сложные заголовки (будут поддерживаться начиная с BootsFaces 1.2.0): добавить фасет заголовка к окружающему <b:dataTable /> тег. В этом случае вы несете ответственность за определение правильного количества заголовков таблицы. Если вы пропустите один, вы будете вознаграждены ошибкой JavaScript. Во многих случаях это может даже остаться незамеченным, но инициализация таблицы данных является неполной, поэтому вам следует быть осторожным.

<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>