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>&nbsp;

</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%">&nbsp;

<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;

    public class Employee {

    

          protected String firstName;

          protected String lastName;

          protected String username;

          protected String email;

          protected String country;

          

    

          public String getFirstName () {

            return (firstName);

          }

            public String getLastName (){

            return (lastName);

          }      

          public String getUsername () {

            return (username);

          }            

          public String getEmail() {

            return (email);

            }

          

          public String getState () {

            return (email);

            }   

          

          public String getCountry () {

            return (country);

            }      

    

          public void setFirstName (String newFirstName)

                 {

            firstName = newFirstName;

            }

            public void setLastName (String newLastName)

            {

            lastName = newLastName;

            }

    

           public void setUsername (String newUsername)

                 {

            username = newUsername;

            }

    

            public void setEmail (String newEmail)

            {

            email = newEmail;

            } 

            

            public void setCountry(String newCountry)

            {

            country = newCountry;

            } 

    

    

          }

Output:

Display records of first page.

Display the Second or Next page.

To navigate first page click on the "Previous" or "1".

Download the application