JSP Paging Example in Datagrid
In this section, we have developed a web application to create paging in JSP. Two files are used "paging.jsp" and "Employee.java" in the code given below.
Brief description of the flow of application :
1). Create a web page "paging.jsp" to display the record.
2). Include the commons-math-1.0-dev.jar,
taglibs-datagrid.jar, mysql-connector-java-3.1.6-bin.jar
and jstl.jar in the lib directory.
3).To create a Java Bean file "Employee.java" in the package "emp".
4). Import all the packages on the "paging.jsp".
<%@ page import="java.util.*"%>
<%@ page import="org.apache.taglibs.datagrid.DataGridParameters"%>
<%@ page import="java.sql.*"%>
<%@ page import="emp.*"%>
<%@ taglib uri="http://jakarta.apache.org/taglibs/datagrid-1.0" prefix="ui" %>
<%@ taglib uri="http://java.sun.com/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jstl/fmt" prefix="fmt" %>
5). Create arraylist "empList" to add the Employee
object record.
ArrayList empList = new ArrayList ();
6). Using the Taglib to create paging and show records.
Step:1 To create a "register" table in Database
| create table `register` ( `username` varchar (100), `password` varchar (100), `firstname` varchar (100), `lastname` varchar (100), `email` varchar (100), `country` varchar (100) ); |
Step:2 To create a web page "paging.jsp"
<%@ page contentType="text/html"%>
<%@ page import="java.util.*"%>
<%@ page import="org.apache.taglibs.datagrid.DataGridParameters"%>
<%@ page import="java.sql.*"%>
<%@ page import="emp.*"%>
<%@ taglib uri="http://jakarta.apache.org/taglibs/datagrid-1.0" prefix="ui" %>
<%@ taglib uri="http://java.sun.com/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jstl/fmt" prefix="fmt" %>
<html>
<head>
<title>jsp paging example in datagrid</title>
<style>
th a:link { text-decoration: none; color: black }
th a:visited { text-decoration: none; color: black }
.rows { background-color: white }
.hiliterows { background-color: pink; color: #000000; font-weight: bold }
.alternaterows { background-color: #efefef }
.header { background-color: cyan; color: #000000;font-weight: bold }
.datagrid { border: 1px solid #C7C5B2; font-family: arial; font-size: 9pt;
font-weight: normal }
</style>
</head>
<body>
<br><br>
<span align="center" style="padding-left:250px;font-size:20px;">Employee Records</span>
<br>
<% ArrayList empList = new ArrayList ();
Employee empObj;
int fromIndex, toIndex;
int tcount =0;
int perpage=4;
int tpage=0;
try {
String connectionURL = "jdbc:mysql://localhost:3306/user_register";
Connection connection = null;
Statement statement = null;
ResultSet rs = null;
Class.forName("com.mysql.jdbc.Driver").newInstance();
connection = DriverManager.getConnection(connectionURL, "root", "root");
statement = connection.createStatement();
String QueryString = "SELECT * from register";
rs = statement.executeQuery(QueryString);
while (rs.next()) {
tcount++;
empObj = new Employee ();
empObj.setFirstName(rs.getString("firstname"));
empObj.setLastName(rs.getString("lastname"));
empObj.setUsername(rs.getString("username"));
empObj.setEmail(rs.getString("email"));
empObj.setCountry(rs.getString("country"));
empList.add(empObj);
}
rs.close();
statement.close();
connection.close();
}
catch (Exception ex) {
System.out.println("Unable to connect to batabase."+ex);
}
fromIndex = (int) DataGridParameters.getDataGridPageIndex (request, "datagrid1");
if ((toIndex = fromIndex+4) >= empList.size ())
toIndex = empList.size();
request.setAttribute ("empList", empList.subList(fromIndex, toIndex));
pageContext.setAttribute("tCount", tcount);
%>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<ui:dataGrid items="${empList}" var="employee" name="datagrid1" cellPadding="0"
cellSpacing="0" styleClass="datagrid" >
<columns>
<column width="50">
<header value="" hAlign="left" styleClass="header"/>
</column>
<column width="200">
<header value="Name" hAlign="left" styleClass="header"/>
<item value="${employee.firstName} ${employee.lastName}" hAlign="left"
styleClass="item"/>
</column>
<column width="200">
<header value="Username" hAlign="left" styleClass="header"/>
<item value="${employee.username}" hAlign="left" styleClass="item"/>
</column>
<column width="200">
<header value="Email" hAlign="left" styleClass="header"/>
<item value="${employee.email}" hAlign="left" styleClass="item"/>
</column>
<column width="100">
<header value="Country" hAlign="left" styleClass="header"/>
<item value="${employee.country}" hAlign="left" styleClass="item"/>
</column>
</columns>
<rows styleClass="rows" hiliteStyleClass="hiliterows"/>
<alternateRows styleClass="alternaterows"/>
<paging size="4" count="${tCount}" custom="true" nextUrlVar="next"
previousUrlVar="previous" pagesVar="pages"/>
<order imgAsc="up.gif" imgDesc="down.gif"/>
</ui:dataGrid>
<table width="750" style="font-family: arial; font-size: 10pt" border=0>
<tr>
<td align="left" width="33%">
<c:if test="${previous != null}">
<a href="<c:out value="${previous}"/>">Previous</a>
</c:if>
</td>
<td align="center" width="33%">
<c:forEach items="${pages}" var="page">
<c:choose>
<c:when test="${page.current}">
<b><a href="<c:out value="${page.url}"/>"><c:out value="${page.index}"/></a></b>
</c:when>
<c:otherwise>
<a href="<c:out value="${page.url}"/>"><c:out value="${page.index}"/></a>
</c:otherwise>
</c:choose>
</c:forEach>
</td>
<td align="right" width="33%">
<c:if test="${next != null}">
<a href="<c:out value="${next}"/>">Next</a>
</c:if>
</td>
</tr>
</table>
</body>
</html>
Step:3 To create a "Employee.java"
package emp;
|
Output:
Display records of first page.
Display the Second or Next page.
To navigate first page click on the "Previous" or "1".