The data table is a Faces component you can add to a Faces JSP
page to display application data. It is a table-like control for displaying
data from multiple database records. It consists of one or more columns, each
with a header area and a data area. It is the data area of the column that
repeats for each record.
You typically bind a data table to a record list or other data source,
and the data table displays the data belonging to that record list. The data
table contains columns, which act as containers for Faces components.
There are multiple ways to create a data table.
- Drag a record list from the Page Data View if the data source has already
been defined. This is the easiest way to create a data table, record list,
array, java.lang.Collection, or javax.faces.model.DataModel object.
- Drag a record list from the Data drawer of the Palette and then define
the data source.
- Drag a data table from the Faces components drawer of the palette to the
Faces JSP page. Then, create the columns you'll need, add input, output, or
other components to the columns, and bind data to the components in the table.
This last method of creating a data table usually takes the most time but
does give you design flexibility.
The data table offers great flexibility in how it is rendered on the user
interface of your application. You can customize it in a variety of ways:
- Add, remove, and change the order of columns
- Format text and background, Can also modify the css classes for dataTable
itself, the columns, rows, header and footer
- Modify the CSS classes for the data table itself and for the columns,
rows, header, and footer
- Add header, footer, and margins
- Add paging for results display
You can perform actions such as Read, Update, and Delete on the data displayed
in a data table, and you can also create new data records. There are several
ways to associate actions with a data table:
- Associate an action with the data table, so that when a user clicks anywhere
within a row of a table, the action is applied to the relational record for
that row.
- Enable row selection for the data table, and then add buttons to perform
actions on the selected rows. You should enable row selection when you want
an action to apply to one or more rows. If you want an action to apply to
just one row, you can associate an action with the data table (see previous
bullet).
- Add a Link - Command component to another component already in the data
table. When the user clicks the Link - Command component, a different page
might open. A Link - Command component is typically used for a transactional
operation to manipulate data.
- Add an Actions column and then drag Link - Request components into each
row of the column. When the user clicks the Link - Request component, an action
is applied to the selected row. Optionally, the user can go to a different
page (for example, a confirmation page). A Link - Request component is typically
used to navigate.
- Enable row categorization for the data table so that you can group similar
rows together so that the end user clicks a twistie to expand or collapse
the similar rows.
- Enable row edit for the data table so that the end user has the ability
to edit a row.
To learn more about creating and formatting data tables, do the following
tutorial:
Tutorial: Display dynamic information on Web pages with JavaServer Faces. This
tutorial will teach you how to design a dynamic Web site that functions as
a newspaper's classified advertising section. The Web site is a complete J2EE
Web application that uses JavaServer Faces (JSF) components and Service Data
Objects (SDO) components. The Web application uses JSF technology to create
dynamic Web pages that link to a database that stores classified advertising
data.Tutorial:
Display dynamic information on Web pages with JavaServer Faces. This tutorial
will teach you how to design a dynamic Web site that functions as a newspaper's
classified advertising section. The Web site is a complete J2EE Web application
that uses JavaServer Faces (JSF) components and Service Data Objects (SDO)
components. The Web application uses JSF technology to create dynamic Web
pages that link to a database that stores classified advertising data.
Important: If the component, whose value
you want to use as a parameter is contained by a data table, you must manually
add
$$AJAXROW$$<component client id> to
the parameter set. Where
<component client id> is a
client ID of the component whose value you want to send as the parameter.
For example,
<h:form id="form1" styleClass="form">
<hx:dataTableEx border="0" cellpadding="2" cellspacing="0"
columnClasses="columnClass1" headerClass="headerClass"
footerClass="footerClass" rowClasses="rowClass1, rowClass2"
id="tableEx1" styleClass="dataTableEx" value="#{company.employeeList}"
var="varEmployee">
<hx:columnEx id="columnEx1">
<f:facet name="header">
<h:outputText id="text1" styleClass="outputText" value="Id">
</h:outputText>
</f:facet>
<h:outputLink id="link1">
<h:outputText id="text2" styleClass="outputText"
value="#{varEmployee.name}">
</h:outputText>
<hx:behavior event="onclick" behaviorAction="get;stop"
targetAction="detailsBox"/>
</h:outputLink>
<h:inputHidden id="empId" value="#{varEmployee.Id}"/>
</hx:columnEx>
</hx:dataTableEx>
<hx:panelBox id="detailsBox" styleClass="panelBox">
<h:outputText id="text2" styleClass="putText"
value="#{company.employeeList[param.empId].department}">
</h:outputText>
</hx:panelBox>
<hx:ajaxRefreshRequest id="ajaxExternalRequest1" target="detailsBox" params="$$AJAXROW$$form1:tableEx1:empId" >
</hx:ajaxRefreshRequest>
</h:form>
The parameter set is a list of IDs separated by semicolons.
The value of these components are retrieved and appended as params to the
URL used to get the new content. The name of the param is the ID of the component.