|
Step 2:- Mapping the backing bean in the faces-config.xml file. The code is as follows:-
<managed-bean>
<managed-bean-name>PageBean</managed-bean-name>
<managed-bean-class>com.visualbuilder.PageBean</managed-bean-class>
<managed-bean-scope>request</managed-bean-scope>
</managed-bean> |
Step 3:- Create the JSP page to display the data coming from the getItemList () method of the backing bean. The code is as follows:-
<navigation-rule>
<from-view-id>/datatable.jsp</from-view-id>
<navigation-case>
<from-outcome>success</from-outcome>
<to-view-id>/datatable.jsp</to-view-id>
</navigation-case>
</navigation-rule> |
Step 4:- Create the following jsp page and named it as datatable.jsp.
<%@page contentType="text/html"%>
<%@page pageEncoding="UTF-8"%>
<%@taglib prefix="f" uri="http://java.sun.com/jsf/core"%>
<%@taglib prefix="h" uri="http://java.sun.com/jsf/html"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<%--
This file is an entry point for JavaServer Faces application.
--%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
This example shows the use of pagination structure in the page Using DataTable
</head>
<body>
<f:view>
<h:form id="form1">
Size :- <h:inputText id="size" value="#{PageBean.size}"/><br/>
Page Number :- <h:inputText id="pageNo" value="#{PageBean.pageNo}"/><br/>
<h:commandButton id="submit" action="success" value="Submit" />
<br/>
<br/>
<h:dataTable id="dt1" value="#{PageBean.itemList}" var="item" bgcolor="#F1F1F1" border="10" cellpadding="5" cellspacing="3" first="#{PageBean.startIndex}" rows="#{PageBean.size}" width="50%" dir="LTR" frame="hsides" rules="all" summary="This is a JSF code to create dataTable." >
<f:facet name="header">
<h:outputText value="The DataTable View " />
</f:facet>
<h:column>
<f:facet name="header">
<h:outputText value="Name"/>
</f:facet>
<h:outputText value="#{item.name}"></h:outputText>
</h:column>
<h:column>
<f:facet name="header">
<h:outputText value="Password"/>
</f:facet>
<h:outputText value="#{item.password}"></h:outputText>
</h:column>
<h:column>
<f:facet name="header">
<h:outputText value="Description"/>
</f:facet>
<h:outputText value="#{item.description}"></h:outputText>
</h:column>
</h:dataTable><br><br>
</h:form>
</f:view>
</body>
</html>
|
OutPut:- After running the page you will see the following output.
|
Total Members
Delicious
Digg
Technorati
Blink
Furl
Reddit
Newsvine
Google
