About Nitin Kumar

Nitin Kumar works as a Solution Architecture in Wipro Technologies specialize in SOA. He has over twelve years of experience in information technology architecting and developing software systems, focus mainly on JEE solutions.

How to create JQuery DataTable using JSON and servlet

In this article I’ll introduce the basic coding that require to create JQuery DataTable using JSON passed by simple servlet. DataTable is very powerful JQuery based grid with advance features which can be build in short span of time with customize features.
 
 
 
 
 
 

Installation

  1. Download Latest JQuery DataTable download
  2. Above download will provide two JQuery plugin jquery.js and queryTables.js
    <script type="text/javascript"
    charset="utf-8" src="/DataTables/media/js/jquery.js"></script>
    <script type="text/javascript"
    charset="utf-8" src="/DataTables/media/js/jquery.dataTables.js"></script>
  3. Default stylesheet which shipped with latest DataTable download package
    <style type="text/css" title="currentStyle">
     @import "../resources/css/demo_table.css";
    </style>

Note:You can download full source code from Github link

Creating the DataTable

We can write below code to create the basic DataTable with data

feedSummary.jsp

<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
var oTable = $('#tableId').dataTable( {
"processing": true,
"ajax": {
"url": "/FeedSummaryUpdate/FeedServlet",
"dataSrc": "demo",
"type": "GET"
}
} );
} );
</script>

$(document).ready will ready to execute the javascript and var oTable = $(‘#tableId’).dataTable says that write DataTable on tableId place.

DataTables will adding sorting, filtering, paging and information to your table by default, providing the end user of your web-site with the ability to control the display of the table and find the information that they want from it as quickly as possible.

The pointer tableId and column name will be defined in table tag as below

feedSummary.jsp

<table cellpadding="0" cellspacing="0" border="0"
id="tableId">
<thead>
<tr>
<th width="10%">First Name</th>
<th width="10%">Last Name</th>
<th width="10%">Address 1</th>
<th width="10%">Address 2</th>
</tr>
</thead>
</table>

Above DataTable code invoke FeedServlet which will return JSON string as defined below

FeedServlet.java

protected void doPost(HttpServletRequest request,
HttpServletResponse response) throws ServletException, IOException {
PrintWriter out = response.getWriter();
String json = "{ \"demo\":[[\"First Name\",\"Last Name\","+
+\"Address1\",\"Address2\"],[\"First Name\",\"Last Name\",\"Address1\",\"Address2\"]]}";
out.println(json);
}

Now either we can use servlet annotation or web.xml as below to register above FeedServlet

Web.xml

<servlet>
<description></description>
<display-name>FeedServlet</display-name>
<servlet-name>FeedServlet</servlet-name>
<servlet-class>FeedServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>FeedServlet</servlet-name>
<url-pattern>/FeedServlet</url-pattern>
</servlet-mapping>

Running

Incorporate the above point and deploy with server to view the result as follows: http://localhost:8080/ExampleDataTableJSON/feedSummary.jsp

JQuery DataTable Image

jquery-datatabl

Conclusion

You can download full source code from Github link and most welcome to fork or update the same.

Resources:

 

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.

Leave a Reply


seven × 8 =



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