Example Continued For Data Table

text zoom

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.





                    

Copyright © 2012 VisualBuilder. All rights reserved