Pages Navigation Menu

Coding is much easier than you think

Pagination in Servlet and JSP using jQuery jTable plugin

pagination in j2ee
This is the 3rd article on jQuery jTable plugin that describes on how to implement pagination feature to do server side paging and here I have not explained about how to setup jTable plugin in java web application. So If you have not read my previous articles “Setting up JQuery jTable plugin in Java web application” and “Ajax based curd operation in Java web application using JQuery jTables plugin”, I will recommend that you read that article first because first one explains how you can integrate the JTable plugin in Java web application and in second article explains on how to implement ajax based curd operation. This article will assume that the code for the integration of jQuery JTable plugin is implemented, and only the code required for implementing pagination in Java web application using jTable will be explained here.


Now download the sample application of my previous tutorial and import the project in eclipse. Now follow the steps in previous tutorial to create table in database and make sure you have atleast 5 records in the table.
Now on running this application, you will see a table displaying records without pagination such as the one shown below.
Now the following steps are needed to be followed to enable paging feature in jTable

Changes from the browser perspective: jTable

To enable paging, paging option must set to true. You can also set pageSize option (default value is 10) in jQuery Script code.

    paging: true, //Set paging enabled
    pageSize: 3, //Set page size
    actions: {
    fields: {

Note: pageSize sets the initial number of records to be displayed per page.
Modified Jsp page is shown below

<!DOCTYPE html>
<title>Pagination in Java Web Applications using jTable plugin</title>
<!-- Include one of jTable styles. -->
<link href="css/metro/blue/jtable.css" rel="stylesheet" type="text/css" />
<link href="css/jquery-ui-1.10.3.custom.css" rel="stylesheet"
	type="text/css" />
<!-- Include jTable script file. -->
<!-- Include jTable script file. -->
<script src="js/jquery-1.8.2.js" type="text/javascript"></script>
<script src="js/jquery-ui-1.10.3.custom.js" type="text/javascript"></script>
<script src="js/jquery.jtable.js" type="text/javascript"></script>

<script type="text/javascript">
$(document).ready(function() {
		title : 'Students List',
           paging: true, //Enable paging
           pageSize: 3, //Set page size (default: 10)           
           actions: {
               listAction: 'Controller?action=list',
               updateAction: 'Controller?action=update',
               deleteAction: 'Controller?action=delete'
		fields : {
			studentId : {
				title : 'Student Id',
				sort :true,
				width : '30%',
				key : true,
				list : true,
				edit : false,
				create : true
			name : {
				title : 'Name',
				width : '30%',
				edit : true
			department : {
				title : 'Department',
				width : '30%',
				edit : true
			emailId : {
				title : 'Email',
				width : '20%',
				edit : true

<div style="text-align: center;">
	<h4>Pagination in Java Web Applications jTable</h4>
	<div id="StudentTableContainer"></div>


Changes from the server’s perspective: Servlet

If paging is enabled in jsp then jTable sends two query string parameters to the server on listAction AJAX call:
jtStartIndex: Start index of records for current page.
jtPageSize: Count of maximum expected records.

And it expects additional information from server:
TotalRecordCount: Total count of records.
In our previous example the url specified in the ‘listAction‘ option has business logic to fetch all records from database. Now in order to handle pagination this ‘listAction’ option should return only the part of resultset for each page, So handle this there are two changes that has to be done in the server side .
1. In order to return only a subset of records according to the page offset (jtStartIndex and jtPageSize), sql query used in CRUDDao should be modified with query below,
In case of Oracle database:
“SELECT * from (Select M.*, Rownum R from STUDENT M) where r > ” + < jtStartIndex> +” and r <= "+< jtStartIndex + jtPageSize >;
In case of MySql database:

select * from STUDENT limit <jtStartIndex>,<jtPageSize>

Changes made in CRUDDao at getAllStudents function

public List<Student> getAllStudents(int startPageIndex, int recordsPerPage) 
	List<Student> students = new ArrayList<Student>();
	int range = startPageIndex+recordsPerPage;
	String query="SELECT * from 
        (Select M.*, Rownum R From STUDENT M) where 
        r > " + startPageIndex +" and r <= "+range;
		Statement stmt = dbConnection.createStatement();
		ResultSet rs = stmt.executeQuery(query);
		while (
			Student student = new Student();

	catch (SQLException e) 
	return students;

2. As mentioned above, jTable need TotalRecordCount to be present in the json response, For which add the following function in CRUDDao which returns total Record Count value present in database.

public int getStudentCount()
	int count=0;
	   Statement stmt = dbConnection.createStatement();
	   ResultSet rs = stmt.executeQuery("SELECT COUNT(*) AS COUNT FROM STUDENT");
	   while ( 
	catch (SQLException e) 
	return count;


Changes made in Controller

The following changes where made in the logic inside the if loop -> ‘if(action.equals(“list”))’

HashMap<String, Object> JSONROOT = new HashMap<String, Object>();

if (action.equals("list")) {
	try {				
	// Fetch Data from User Table
	int startPageIndex = Integer.parseInt(request.getParameter("jtStartIndex"));
	int recordsPerPage = Integer.parseInt(request.getParameter("jtPageSize"));

	// Fetch Data from Student Table
	studentList = dao.getAllStudents(startPageIndex, recordsPerPage);
	// Get Total Record Count for Pagination
	int userCount = dao.getStudentCount();

	// Return in the format required by jTable plugin
	JSONROOT.put("Result", "OK");
	JSONROOT.put("Records", studentList);
	JSONROOT.put("TotalRecordCount", userCount);

	// Convert Java Object to Json
	String jsonArray = gson.toJson(JSONROOT);

	} catch (Exception ex) {
		JSONROOT.put("Result", "ERROR");
		JSONROOT.put("Message", ex.getMessage());
		String error = gson.toJson(JSONROOT);

Now on running the application, with the above changes, the final demo looks as shown below:


jTable official website
AJAX based CRUD tables using ASP.NET MVC 3 and jTable jQuery plug-in
Wikipedia : JSON

About Mohaideen Jamil

Am currently working as a Struts 2 Developer in a reputed IT Organisations. I can help you with teaching Core java and Struts 2. Follow me on Facebook or Google Plus. If you like my tutorials, consider making a donation to this charity, thanks.

  • giridhar v

    Hi to all. I’ve downloaded and tried to execute both CRUD Operations and Pagination code. But i m getting same error i.e. “An error occured while communicating to the server”. In discussion some body said servlet is not triggered via jtable jquery java script. But i did not get it. Can anyone please solve this. Thanks in advance..!

  • kumar

    The Pagination in the table displays like this 1 2 NaN NaN 3.
    Say for example If I have three pages, between two and three. NaN displays. How to resolve this ?

    • Fernando

      Hi Mohaideen Jamil, how solve Pagination in the table displays like this 1 2 NaN NaN 3.???
      Help …

  • Santos

    this error:

    Every derived table must have its own alias in MYSQL workbench SELECT * from (Select M.*, Rownum R From pessoa M) where r > 0 and r <= 10

    • Mohaideen Jamil

      Hi, I have used oracle table to demonstrate above scenario, in case of mysql , you have to use query as below

      select * from STUDENT limit ,