Datatable y Column

Aurelio Martín Obando TávaraProyectos IIaot@upnorte.edu.pe

Universidad Privada del Norte – Av. El Ejército 920 Urb. El Molino – www.upnorte.edu.pe

Datatable• Renders an HTML "table" element compliant with the

HTML 401 specification. Render the "caption" facet, if present, inside a "caption" element immediately below the "table" element. If the "captionClass" attribute is specified, render its value as the value of the "class" attribute on the "caption" element. If the "captionStyle" attribute is specified, render its value as the value of the "style" attribute on the "caption" element.

• Rendering the header– If the UIData component has a "header" facet, or any of the

child UIColumn components has a "header" facet, render a "thead" element. If the UIData component has a "header" facet, encode its contents inside of "tr" and "th" elements, respectively. Output the value of the "headerClass" attribute of the UIData component, if present, as the value of the "class" attribute on the "th". Output the number of child UIColumn components of the UIData component as the value of the "colspan" attribute on the "th". Output "colgroup" as the value of the "scope" attribute on the "th" element.

Universidad Privada del Norte – Av. El Ejército 920 Urb. El Molino – www.upnorte.edu.pe

Datatable• If any of the child UIColumn components has a "header"

facet render a "tr" element. For each UIColumn that actually has a "header" facet, render it inside of a "th" element. Columns that don't have a "header" facet cause an empty "th" element to be rendered. Output the value of the "headerClass" attribute of the UIColumn component, if present, as the value of the "class" attribute on the "th". If the "headerClass" attribute of the UIColumn component is not present, output the value of the "headerClass" attribute of the UIData component, if present, as the value of the "class" attribute on the "th". Output "col" as the value of the "scope" attribute on the "th" element.

• Close out the "thead" element.• Rendering the footer

– Follow the same process as for the header, except replace "header" with "footer", "th" with "td", "thead" with "tfoot", and "headerClass" with "footerClass". Do not render any "scope" attribute for the footer.

Universidad Privada del Norte – Av. El Ejército 920 Urb. El Molino – www.upnorte.edu.pe

Datatable• Rendering the table body

– Render a "tbody" element. Keep track of the result of the "rows" property on the UIData component. Keep track of the number of rows we have rendered so far. Iterate through the rows. Set the "rowIndex" property of the UIData component to be correct as we iterate through the rows. Stop rendering children and close out the "tbody" element if the "rowAvailable" property of the UIData returned false. Output a "tr" element. Output the value of the "rowClasses" per the attribute description below. For each UIColumn child, output a "td" element, attaching the value of the "columnClasses" attribute of the UIData component per the attribute description below. Recursively encode each child of each UIColumn child. Close out the "td" element. When done with the row, close out the "tr" element. When done with all the rows, close out the "tbody" element.

• When done rendering all the rows, set the "rowIndex" property of the UIData to -1, and close out the "table" element.

Universidad Privada del Norte – Av. El Ejército 920 Urb. El Molino – www.upnorte.edu.pe

Column

• Renders a UIComponent that represents a single column of data within a parent UIData component.

Universidad Privada del Norte – Av. El Ejército 920 Urb. El Molino – www.upnorte.edu.pe

Uso de Datatable y Column

• En su forma más básica:<h:dataTable id="tblGrupos“ width="100%"

cellpadding="0" cellspacing="0" border="1" var="grupo"

value="#{GrupoController.grupos}" >

<h:column>

<f:facet name="header"><h:outputText value=“Cabecera" /></f:facet>

</h:column>

</h:dataTable>

Universidad Privada del Norte – Av. El Ejército 920 Urb. El Molino – www.upnorte.edu.pe

Ejemplo de Uso