Home Jsp JSP Paging Example in Datagrid

JSP Paging Example in Datagrid
Posted on: August 29, 2008 at 12:00 AM

In this section, we have developed a web application to create paging in JSP.

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

Related Tags for JSP Paging Example in Datagrid:
c, web, jsp, application, io, paging, this, app, create, js, to, e, section, li, pe, dev, in, ca, agi, j, pp, cat, s, sp, gin, at, is, ha, develop, ea, s, s, th, av, ati, ap, ica, ica, pl, on, o

«Previous Index Next»