Pages Navigation Menu

Coding is much easier than you think

GridView in Struts2 using jQuery DataTable via Ajax

In this post, I am going to explain on how to use DataTable plugin to display data in Gridview format with pagination feature in Struts 2 web application.
Gridview in Struts2 using jQuery DataTable plugin
DataTable is a jQuery plugin which adds a lot of functionality to plain HTML tables, such as filtering, paging sorting, changing page length, server side processing etc.


In this example, I am going to retrieve values from a csv file and display it in html table. For this, I am going to use OpenCSV library which simplifies the work of parsing CSV files. Here the Data table will load the data by making an Ajax call.
• Refer the article on how to Read / Write CSV file in Java using Opencsv library/ .
Since the response to be generated from the action class is of type JSON, So to handle it you need struts2-json-plugin-2.x.x.jar. This plugin allows you to serialize the Action class attribute (which has getter and setter) into a JSON object. Refer this article here for more detail.
Now create a dynamic web project in eclipse and create two folders named ‘js’ and ‘css’ under WebContent, and add the following javascript files from DataTable to the ‘js’ folder

• jquery.dataTables.js
• jquery.js

Add the following css files from DataTable & jQuery ui to ‘css’ folder.

• demo_page.css
• demo_table_jui.css
• jquery-ui-x.x.x.css
** UPDATE: Struts 2 Complete tutorial now available here.
Download the csv file from which the data is to be read from here and place it under src folder, This files contains four columns – company, country, revenue, and year.

Project Structure

Folder structure - Gridview - Struts2 - DataTable 2

Model class

Create a model class that gets and sets the data from the four columns (company, country, revenue, and year) of the csv file.

package com.model;

public class RevenueReport {

	public RevenueReport(String company, String country, String year,
			String revenue) { = company; = country;
		this.year = year;
		this.revenue = revenue;

	private String company;
	private String country;
	private String year;
	private String revenue;

	public String getCountry() {
		return country;

	public String getRevenue() {
		return revenue;

	public String getCompany() {
		return company;

	public String getYear() {
		return year;

	public void setCountry(String country) { = country;

	public void setRevenue(String revenue) {
		this.revenue = revenue;

	public void setCompany(String company) { = company;

	public void setYear(String year) {
		this.year = year;


Business class

Create a Business Service class that would fetch data from the csv file using model class.

package com.service;

import java.util.LinkedList;
import java.util.List;


import com.model.RevenueReport;

public class BusinessService {

public static List<RevenueReport> getCompanyList() {

	List<RevenueReport> listOfCompany = new LinkedList<RevenueReport>();
	String fileName = "Company_Revenue.csv";

	InputStream is = Thread.currentThread().getContextClassLoader()
	BufferedReader br = new BufferedReader(new InputStreamReader(is));

	try {
		CSVReader reader = new CSVReader(br);
		String[] row = null;
		while ((row = reader.readNext()) != null) 
		listOfCompany.add(new RevenueReport(row[0], row[1], row[2],	row[3]));
	} catch (IOException e) {
	return listOfCompany;



Now create the jsp file to display the data fetched from csv file in html table and enhance the table features using DataTable plugin.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "">
<title>Gridview in Struts2 using jQuery DataTable plugin</title>

<link href="css/demo_table_jui.css" rel="stylesheet" />
<link href="css/jquery-ui.css" rel="stylesheet" />
<link href="css/demo_page.css" rel="stylesheet" />

<script src="js/jquery.js"></script>
<script src="js/jquery.dataTables.js"></script>
$(document).ready(function() {
		"sPaginationType" : "full_numbers",
		"bProcessing" : false,
		"bServerSide" : false,
		"sAjaxSource" : "dataTablesAction",
		"bJQueryUI" : true,
		"aoColumns" : [
            { "mData": "company" },
            { "mData": "country" },
            { "mData": "year" },
            { "mData": "revenue" }
    } ); 
} );


<body id="dt_example">
<div id="container">
<h1>Ajax based Gridview in Struts2 using jQuery DataTable plugin</h1>
<div id="demo_jui">
	<table class="display jqueryDataTable">

Do read :

  • jQuery Tutorial for Beginners
  • Autocomplete in Java web application using jQuery
  • Tab Style Login and Signup example using jQuery in Java web application

    Action class

    In reply to each request for information that DataTables makes to the server, it expects to get a well formed JSON object with the parameter below.

    1. aaData- The data in a 2D array.

    package com.action;
    import java.util.List;
    import com.model.RevenueReport;
    import com.opensymphony.xwork2.Action;
    import com.service.BusinessService;
    public class GridViewAction implements Action {
    	private List<RevenueReport> aaData;
    	public List<RevenueReport> getAaData() {
    		return aaData;
    	public void setAaData(List<RevenueReport> aaData) {
    		this.aaData = aaData;
    	public String execute() {
    		aaData = BusinessService.getCompanyList();
    		return SUCCESS;




      	<package name="default" extends="json-default">
    		<action name="dataTablesAction" class="com.action.GridViewAction">
                            <result type="json">
                               <param name="excludeNullProperties">true</param>
                              <param name="noCache">true</param>

    Note that I have extended “json-default” package instead of struts-default package and I have set the result type to json, I have explained about the reason for extending “json-default” package in the article AJAX implementation in Struts 2 using JQuery and JSON, please refer the mentioned link if you are not aware of the same.

    Recommended reading:

  • Ajax in struts 2 implementation without jQuery library


    Make sure you have done servlet mapping properly in web.xml file as shown below




    Gridview in Struts2 using jQuery DataTable plugin

    About Mohaideen Jamil

    I'm a Full stack developer of IT exp in J2EE, AngularJs, MicroServices, Docker, Spring (Boot, MVC, Cloud), Bluemix, DevOps. Follow me on Facebook or Google Plus. If you like my tutorials, consider making a donation to this charity, thanks.

    %d bloggers like this: