Latest Tutorials| Questions and Answers|Ask Questions?|Site Map

Home Jsp JSP Paging Example in Datagrid

Related Tutorials


Share on Google+Share on Google+

JSP Paging Example in Datagrid

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 "" 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 "" 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="" prefix="ui" %>
<%@ taglib uri="" prefix="c" %>
<%@ taglib uri="" 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="" prefix="ui" %>

<%@ taglib uri="" prefix="c" %>

<%@ taglib uri="" prefix="fmt" %>



<title>jsp paging example in datagrid</title>


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 }





<span align="center" style="padding-left:250px;font-size:20px;">Employee Records</span>


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


connection = DriverManager.getConnection(connectionURL, "root", "root");

statement = connection.createStatement();

String QueryString = "SELECT * from register";

rs = statement.executeQuery(QueryString);

while ( { 


empObj = new Employee ();












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


<column width="50">

<header value="" hAlign="left" styleClass="header"/>


<column width="200">

<header value="Name" hAlign="left" styleClass="header"/>

<item value="${employee.firstName} ${employee.lastName}" hAlign="left" 



<column width="200">

<header value="Username" hAlign="left" styleClass="header"/>

<item value="${employee.username}" hAlign="left" styleClass="item"/>


<column width="200">

<header value="Email" hAlign="left" styleClass="header"/>

<item value="${}" hAlign="left" styleClass="item"/>


<column width="100">

<header value="Country" hAlign="left" styleClass="header"/>

<item value="${}" hAlign="left" styleClass="item"/>



<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"/>


<table width="750" style="font-family: arial; font-size: 10pt" border=0>


<td align="left" width="33%">

<c:if test="${previous != null}">

<a href="<c:out value="${previous}"/>">Previous</a>



<td align="center" width="33%">

<c:forEach items="${pages}" var="page">


<c:when test="${page.current}">

<b><a href="<c:out value="${page.url}"/>"><c:out value="${page.index}"/></a></b>



<a href="<c:out value="${page.url}"/>"><c:out value="${page.index}"/></a>





<td align="right" width="33%">&nbsp;

<c:if test="${next != null}">

<a href="<c:out value="${next}"/>">Next</a>







 Step:3 To create a "" 

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;



Display records of first page.

Display the Second or Next page.

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

Download the application


If you enjoyed this post then why not add us on Google+? Add us to your Circles

Liked it!  Share this Tutorial

Follow us on Twitter, or add us on Facebook or Google Plus to keep you updated with the recent trends of Java and other open source platforms.

Posted on: August 29, 2008

Related Tutorials

Discuss: JSP Paging Example in Datagrid   View All Comments

Post your Comment

Your Name (*) :
Your Email :
Subject (*):
Your Comment (*):
  Reload Image
July 11, 2011

i am not able to execute this i am using oracle...i change these things still not able...can u help me???????
August 15, 2011

hi! hope someone helps me! I get the error: according to TDL or attribute directive in tag file, attribute items does not accept any expressions right around line 75 in the .jsp page where it says <ui:dataGrid item... > right there! please I have tomcat 6.0.32, servlet engine: 2.5; jsp engine: 2.1
April 6, 2012
Giving Error

According to TLD or attribute directive in tag file, attribute items does not accept any expressions This error shows on: <ui:dataGrid items="${empList}" var="employee" name="datagrid1" cellPadding="0" cellSpacing="0" styleClass="datagrid" >
June 16, 2012
jsp pagination

This example is a crap id dosent work
August 9, 2012
Datagrid Deprecated

org.apache.taglibs.datagrid.DataGridParameters has been deprecated and does not work anymore.