Click here to Skip to main content
15,034,432 members
Articles / Programming Languages / Java
Article
Posted 7 Nov 2013

Stats

72.1K views
2.9K downloads
14 bookmarked

Integrate DataTables into Java Web Application (Datatables and Java)

Rate me:
Please Sign up or sign in to vote.
4.83/5 (7 votes)
13 May 2014CPOL4 min read
Integrate DataTables into a Java web application, render DataTable on demand, simple to use and flexible to work with.

Introduction

This article will demonstrate how to integrate Java web with DataTable (DataTables.net) in an easy way.

  1. Integrate Datatable into Servlet
  2. Initiate new Datatables on demand (one click to create a table)
  3. Automatically handle AJAX requests, Response for Datatable (simply by implementing an interface).

Background

If you're looking up on Google, there are some tutorials and articles of integrating Datatables.net into Java Web Application, but for me, I can't find an example that meets my need. I need something comprehensive, something that will help me control the Datatables on Java code and I can easily working with. Finished by my own, and here are the ideas:

  1. Map all Datatables properties into Java Objects, of course with the document from Datatables.net.
  2. Find a way to render the table's header easier, and end up with two ways: Classical class, and Annotation
  3. What is the best way to handle Ajax request sent from the table if the Datatables is set with server side processing.

In order to fully understand the article, you have to be familiar with the following terms:

  1. Java language (Reflection, annotation), J2EE or at least Java web application.
  2. JavaScript, jQuery, AJAX
  3. JSON
  4. DataTables

The article uses following tools and libraries:

  1. Eclipse IDE (Recommend Eclipse IDE for Java EE Developers)
  2. Jquery http://jquery.com/, Jquery UI http://jqueryui.com/
  3. Datatables http://datatables.net/
  4. Jackson library (for serialize JSON purpose) http://jackson.codehaus.org/
  5. Tomcat server http://tomcat.apache.org/

Using the Code

The source code of this project mainly demonstrates how to use datatables wrapper library. You can find more details and the source code here.

There are two types of tables we want to create on client side (specify by bServerSide properties of DataTable object):

  1. Static data <static table>: Client requests for a table, server returns a Json contains definition for table and data (rows). This type is usually suitable if the database doesn't contain too many records.
  2. Dynamic data <dynamic table>: Client requests for a table, server returns only the definition of the table, and then the table itself will make an Ajax request to retrieve data, to serve this request server only returns a limited amount of data from database. This type is the best choice for the database which has thousand records.

The following steps need to be done when working with datatables wrapper:

  • Add datatables wrapper and dependencies into project.
  • Create a jsp file <index.jsp> that includes the necessary JavaScripts, CSS libraries.
  • Create a Java bean class that represents a table row (including column header definition)
  • Add a new servlet class that declares URL pattern in web.xml file.
  • To handle data for the table, implements IDataHanlder interface.

Here is the screenshot:

Image 1

Eclipse project structure:

Image 2

I. Dependencies

The project requires dependencies:

datatableswapper-1.0.jar, 
jackson-annotations-2.2.3.jar, 
jackson-core-2.2.3.jar, 
jackson-databind-2.2.3.jar

II. Jsp File

Both of them also share the same index.jsp file and require the following JavaScript and CSS libraries:

HTML
<link rel="stylesheet" type="text/css" 
href="js/data_table/reset-min.css">
<link rel="stylesheet" type="text/css" 
href="js/data_table/complete.css"> 
<script type="text/javascript" 
language="javascript" src="js/jquery-1.8.3.js"></script>
<script type="text/javascript" language="javascript" 
src="js/data_table/jquery.dataTables.min.js"></script>
<script type="text/javascript" language="javascript" 
src="js/data_table/jquery.dataTables.plugins.js"></script> 

JavaScript after page is loaded (Note: Due to limitations of JSON, we cannot add callback code into JSON, therefore JSON.parse will substitute the callback name by callback function which usually defines in plugin file.)

JavaScript
$.ajax({
    dataType: "text",//force ajax return text in order to parse json latter.
    url: "DataTableCtrl", 
    success: function(data){
        //custom parse Json
        var jsonTbl = JSON.parse(data, applyCallback);
        
        //create DOM table in memory
        var DOMTable = $("<table>").attr("class", "pretty");
                
        //add dom table into body
        $("body").append(DOMTable);
                
        //init datatables
        oTable = DOMTable.dataTable(jsonTbl); 
    }
}); 

Complete index.jsp file:

HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css" 
href="js/data_table/reset-min.css">
<link rel="stylesheet" type="text/css" 
href="js/data_table/complete.css">

<script type="text/javascript" language="javascript" 
src="js/jquery-1.8.3.js"></script>
<script type="text/javascript" language="javascript" 
src="js/data_table/jquery.dataTables.min.js"></script>
<script type="text/javascript" language="javascript" 
src="js/data_table/jquery.dataTables.plugins.js"></script>

<script language="javascript" type="text/javascript">
    var oTable;
    $(document).ready(function(){
        $.ajax({
            dataType: "text",//force ajax return text in order to parse json latter.
            url: "DataTableCtrl", 
            success: function(data){
                //custome parse Json
                var jsonTbl = JSON.parse(data, applyCallback);
        
                //create DOM table in memory
                var DOMTable = $("<table>").attr("class", "pretty");
                
                //add dom table into body
                $("body").append(DOMTable);
                
                //init datatables
                oTable = DOMTable.dataTable(jsonTbl); 
            }
        });
    });
</script>
</head>
    <body>
    </body>
</html> 

III. Bean Class

The Java bean class will have @AoColumn annotation on each field. It indicates the column header for the table.

Java
import com.fasterxml.jackson.annotation.JsonInclude;
import com.fasterxml.jackson.annotation.JsonInclude.Include;

import net.datatables.wrapper.annotation.AoColumn;

public class Student {
    @AoColumn(sTitle = "ID")
    private int id;
    
    @AoColumn(sTitle = "Name")
    @JsonInclude(Include.ALWAYS)
    private String name;
    
    @AoColumn(sTitle = "Age")
    private int age;
    
    @AoColumn(sTitle = "Class")
    @JsonInclude(Include.ALWAYS)
    private String clazz;
    
    @AoColumn(sTitle = "Address", bSearchable = false)
    @JsonInclude(Include.ALWAYS)
    private String address;
.... Setters and  getters method
} 

The above code defines table column's header will have [ ID | Name | Age | Class | Address].

Note: By default, Datatables wrapper will not include in the JSON response if the value is null, however we want it included if it's the data row values by adding extra annotation.

Java
@JsonInclude(Include.ALWAYS)    

IV. Servlet Class and web.xml:

DataTableCtrl.java

Java
protected void doGet(HttpServletRequest request, HttpServletResponse response) 
                            throws ServletException, IOException {
    // Create an instance of DataTableWrapper
    DataTableWrapper tableWrapper = new DataTableWrapper();
    // Create an instance of Datatable with type: Student
    DataTable<Student> table = new DataTable<>(Student.class);

    // Set properties for table.
    table.bServerSide = true;
    table.bDestroy = true;
    table.sPaginationType = "full_numbers";
    table.fnServerData = new FnCallBack("fnDataTablesPipeline");

    // specify ajax data handle class
    tableWrapper.setDataHandler(StudentDataHandler.class);
    tableWrapper.setDataTable(table);
    try {
        // let the tablewrapper do it job
        tableWrapper.wrap(request, response);
    } catch (Exception e) {
        e.printStackTrace();
    }
} 

web.xml

XML
<servlet>
  <servlet-name>DataTableCtrl</servlet-name>
  <servlet-class>servlet.DataTableCtrl</servlet-class>
</servlet>
<servlet-mapping>
  <servlet-name>DataTableCtrl</servlet-name>
  <url-pattern>/DataTableCtrl</url-pattern>
</servlet-mapping>

V. Implementing IDataHandler Interface

StudentDataHandler.java.

There are three methods that you need to overwrite:

Java
public List<Student> getListData(AjaxRequest tableRequest,...)

AjaxRequest object will contain all the information to which table has sent. Like: sSearchKeyword, iDisplayStart, iDisplayLength... For example: In a dynamic table, after the user clicks the next button on the pagination control. Based on iDisplayStart and iDisplayLength, we will return the correct amount of rows that the table needs.

Note: If on the servlet class we have defined: table.bServerSide = false, the object AjaxRequest will be null, and we should return all records in the database at once. Two methods: getITotalRecords() and getITotalDisplayRecords() need not return any value other than 0.

Java
public class StudentDataHandler implements IDataHandler<Student> {
    List<Student> list;
    int itotalRecords;
    int iTotalDisplay;
    
    public StudentDataHandler() {
        list = getAllStudents();
        itotalRecords = iTotalDisplay = list.size();
    }
    @Override
    public List<Student> getListData(AjaxRequest tableRequest,
            HttpServletRequest request) {
        return filterStudents(tableRequest);
    }

    @Override
    public int getITotalRecords() {
        return itotalRecords;
    }

    @Override
    public int getITotalDisplayRecords() {
        return iTotalDisplay;
    }   

Conclusion

By using annotation, creation of datatables now seems pretty easy. The table will be created on the client side whenever you need it with no limit on columns header and data. Based on this idea, we can create another table and replace the current table using AJAX.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Tuan Xuan Bui
Software Developer (Senior) EZIT Solutions VietNam
Vietnam Vietnam
Finding myself interested in computer since I am first time touching the computer, I decided to become a software engineer.
Graduated HDSE program of Aptech Global Computer Training Center with honor degree in 2011, and started working as J2EE software programmer at EZIT Solutions VN until now.
I am always interested in customer's satisfaction, open source projects and cutting edge technologies.
Not only able to work with modern languages like JAVA, .NET, but also low level like C, and prefer front end development like: HTML, JavaScript, JQuery, CSS...

Comments and Discussions

 
QuestionSorting not working if bServerSide is true Pin
Member 1154205025-Mar-15 5:12
MemberMember 1154205025-Mar-15 5:12 
AnswerRe: Sorting not working if bServerSide is true Pin
Tuan Xuan Bui25-Mar-15 17:17
professionalTuan Xuan Bui25-Mar-15 17:17 
QuestionHelp to deploy Pin
Member 1150175210-Mar-15 4:48
MemberMember 1150175210-Mar-15 4:48 
AnswerRe: Help to deploy Pin
Member 1154205025-Mar-15 5:22
MemberMember 1154205025-Mar-15 5:22 
AnswerRe: Help to deploy Pin
Tuan Xuan Bui25-Mar-15 17:02
professionalTuan Xuan Bui25-Mar-15 17:02 
Questionthanks its great job done Pin
Member 1130504011-Dec-14 20:10
MemberMember 1130504011-Dec-14 20:10 
AnswerRe: thanks its great job done Pin
Tuan Xuan Bui11-Dec-14 21:14
professionalTuan Xuan Bui11-Dec-14 21:14 
Questionabout DataTableCtrl.java Pin
zhaoas017-May-14 15:57
Memberzhaoas017-May-14 15:57 
AnswerRe: about DataTableCtrl.java Pin
Tuan Xuan Bui8-May-14 0:54
professionalTuan Xuan Bui8-May-14 0:54 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.