JQuery DataTables And Java Integration

  • Jquery DataTables is a open source plugin for creating tables in browser.
  • It has many features like sorting,server side processing, JQUERY UI theme rolling.
  • The download link for this plugin:
  • http://www.datatables.net/download/

  • In this demo we have shown integration of data table with java.The Data table will load the data by making an Ajax call to load all the data.
  • The response data must contain ‘aaData’ properties.
  • The main components in this demo are :
  •  
     

    Project Structure:

    Integration With Java :

  • The Static data StudentDataService.java ,
  • package com.sandeep.data.service;
    
    import java.util.ArrayList;
    import java.util.List;
    import com.sandeep.data.object.Student;
    
    public class StudentDataService {
    
     public static List<student> getStudentList() {
    
      List<student> listOfStudent = new ArrayList<student>();
    
      Student aStudent = new Student();
    
      for (int i = 1; i <= 200; i++) {
    
       aStudent = new Student();
    
       aStudent.setName('Sandeep' + i);
    
       aStudent.setMark('20' + i);
    
       listOfStudent.add(aStudent);
      }
    
      return listOfStudent;
    
     }
    }
    
  • Data table object which will go as response in Servlet DataTableObject.java,
  • package com.sandeep.data.object;
    
    import java.util.List;
    
    public class DataTableObject {
    
     int  iTotalRecords;
     
     int  iTotalDisplayRecords;
     
     String  sEcho;
     
     String sColumns;
     
     List<student> aaData;
    
     public int getiTotalRecords() {
      return iTotalRecords;
     }
    
     public void setiTotalRecords(int iTotalRecords) {
      this.iTotalRecords = iTotalRecords;
     }
    
     public int getiTotalDisplayRecords() {
      return iTotalDisplayRecords;
     }
    
     public void setiTotalDisplayRecords(int iTotalDisplayRecords) {
      this.iTotalDisplayRecords = iTotalDisplayRecords;
     }
    
     public String getsEcho() {
      return sEcho;
     }
    
     public void setsEcho(String sEcho) {
      this.sEcho = sEcho;
     }
    
     public String getsColumns() {
      return sColumns;
     }
    
     public void setsColumns(String sColumns) {
      this.sColumns = sColumns;
     }
    
     public List<student> getAaData() {
      return aaData;
     }
    
     public void setAaData(List<student> aaData) {
      this.aaData = aaData;
     }
     
     
     
    }
    
  • The Servlet which return JSON as String StudentDataServlet.java,
  • package com.sandeep.json.data.servlet;
    
    import java.io.IOException;
    import java.io.PrintWriter;
    import java.util.List;
    import javax.servlet.ServletException;
    import javax.servlet.http.HttpServlet;
    import javax.servlet.http.HttpServletRequest;
    import javax.servlet.http.HttpServletResponse;
    import com.google.gson.Gson;
    import com.google.gson.GsonBuilder;
    import com.sandeep.data.object.DataTableObject;
    import com.sandeep.data.object.Student;
    import com.sandeep.data.service.StudentDataService;
    
    public class StudentDataServlet extends HttpServlet {
    
     private static final long serialVersionUID = 1L;
    
     public StudentDataServlet() {
      super();
     }
    
     protected void doGet(HttpServletRequest request,
       HttpServletResponse response) throws ServletException, IOException {
    
      response.setContentType('application/json');
      PrintWriter out = response.getWriter();
      List<Student> lisOfStudent = StudentDataService.getStudentList();
      
      DataTableObject dataTableObject = new DataTableObject();
      dataTableObject.setAaData(lisOfStudent);
      
      Gson gson = new GsonBuilder().setPrettyPrinting().create();
      String json = gson.toJson(dataTableObject);
      out.print(json);
    
     }
    
     protected void doPost(HttpServletRequest request,
       HttpServletResponse response) throws ServletException, IOException {
    
      doGet(request, response);
     }
    
    }
    
    
  • The html file with table element file ajaxDataTable.jsp,
  • <%@ page language='java' contentType='text/html; charset=ISO-8859-1'
        pageEncoding='ISO-8859-1'%>
    <!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>Ajax Data Response And JQuery data table</title>
    
    <style type='text/css' title='currentStyle'>
       @import './resource/css/demo_table_jui.css';
       @import './resource/css/jquery-ui-1.9.2.custom.min.css';
    </style>
    <style>
    .table-container{
     width:800px;
    }
    tr.odd{
    background: #EDE4D4 !important;
    }
    tr.odd td.sorting_1{
    background: #EDE4D4 !important;
    }
    tr.even td.sorting_1{
    background: #fff !important;
    }
    </style> 
      
    </head>
     <body>
     <div class='table-container'>
        <table  cellpadding='0' cellspacing='0' border='0'  class='display jqueryDataTable'>
       <thead>
        <tr>
           <th>Name</th>
         <th>Mark</th>
        </tr>
       </thead>
       <tbody>
       </tbody>
       </table>
       </div>
       <script src='./resource/js/jquery-1.8.3.min.js'></script>
       <script src='./resource/js/jquery.dataTables.min.js'></script>
       <script src='http://code.jquery.com/ui/1.9.2/jquery-ui.js'></script>
       <script src='./resource/js/my-demo-table-script.js'></script>
     </body>
    </html>
    
  • Java Script code for initializing the data table my-demo-table-script.js,
  • $(document).ready(function() {
    
        $('.jqueryDataTable').dataTable( {
            'bProcessing': false,
            'bServerSide': false,
            'sAjaxSource': './StudentDataServlet',
            'bJQueryUI': true,
            'aoColumns': [
                { 'mData': 'name' },
                { 'mData': 'mark' }
                
            ]
        } ); 
    } );
    
    
    

    Output:

    The output of integrated table will be:

    Video:

    Download Demo Code:
    demo code download link
     

    Reference: JQuery DataTables And Java Integration from our JCG partner Sandeep Kumar Patel at the My Small Tutorials blog.

Do you want to know how to develop your skillset to become a Java Rockstar?

Subscribe to our newsletter to start Rocking right now!

To get you started we give you two of our best selling eBooks for FREE!

JPA Mini Book

Learn how to leverage the power of JPA in order to create robust and flexible Java applications. With this Mini Book, you will get introduced to JPA and smoothly transition to more advanced concepts.

JVM Troubleshooting Guide

The Java virtual machine is really the foundation of any Java EE platform. Learn how to master it with this advanced guide!

Given email address is already subscribed, thank you!
Oops. Something went wrong. Please try again later.
Please provide a valid email address.
Thank you, your sign-up request was successful! Please check your e-mail inbox.
Please complete the CAPTCHA.
Please fill in the required fields.

One Response to "JQuery DataTables And Java Integration"

  1. TC says:

    Holy Crap!!! This actually works!! Thanks!

Leave a Reply


− seven = 1



Java Code Geeks and all content copyright © 2010-2014, Exelixis Media Ltd | Terms of Use | Privacy Policy | Contact
All trademarks and registered trademarks appearing on Java Code Geeks are the property of their respective owners.
Java is a trademark or registered trademark of Oracle Corporation in the United States and other countries.
Java Code Geeks is not connected to Oracle Corporation and is not sponsored by Oracle Corporation.
Do you want to know how to develop your skillset and become a ...
Java Rockstar?

Subscribe to our newsletter to start Rocking right now!

To get you started we give you two of our best selling eBooks for FREE!

Get ready to Rock!
You can download the complementary eBooks using the links below:
Close