YUI Asynchronous Data Table Load

  • YUI Data Table can be loaded  From Asynchronous Servlet Response.
  • "datatable" module can be included by using YUI.use() function.
  • "yui3-datatable-table" is the class for wrapping the table element.

Project Structure:-

  • This demo uses a Gson jar library for creating json data .
  • This json data can be called using a Java servlet.
  • The Stucture of project:-

   Json Data Servlet:-

  •  The Servlet return List Of Student Object in JSON format.
  • The Java servlet here is StudentDataServlet.java,
package com.sandeep.json.data.servlet;

import java.io.IOException;
import java.io.PrintWriter;

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.ListOfStudent;
import com.sandeep.data.service.StudentDataService;

public class StudentDataServlet extends HttpServlet {

 private static final long serialVersionUID = 1L;

 public StudentDataServlet() {

 protected void doGet(HttpServletRequest request,
   HttpServletResponse response) throws ServletException, IOException {

  PrintWriter out = response.getWriter();
  ListOfStudent lisOfStudent = StudentDataService.getStudentList();
  Gson gson = new GsonBuilder().setPrettyPrinting().create();
  String json = gson.toJson(lisOfStudent);


 protected void doPost(HttpServletRequest request,
   HttpServletResponse response) throws ServletException, IOException {

  doGet(request, response);


  • The Student List json format will be like,
{ "studentList" : [ { "mark" : "201",
        "name" : "Sandeep1",
        "roll" : "321"
      { "mark" : "202",
        "name" : "Sandeep2",
        "roll" : "322"
    ] }
  • The HTML for the table is yui-datatable-async-data-demo.html ,
<!DOCTYPE html>
        <title>YUI DataTable With Async Data From</title>
        <script src="http://yui.yahooapis.com/3.8.0/build/yui/yui-min.js"></script>
                font-size: 12px;
                font-style: bold;
                font-size: 20px;
                font-style: italic;
    <body class="yui3-skin-sam">
        <div id="yui-data-table-ajax"></div>
            YUI().use('io', 'datatable','datatable-scroll', function (Y) {

                var configuration,
                studentTable, data,

                urifordata = "http://localhost:8080/YUIAsyncDatatableDemo/StudentDataServlet",
                dataTableContainer = Y.one("#yui-data-table-ajax"),
                configuration = {
                  method: 'POST',
                  headers: {
                         'Content-Type': 'application/json',
                     on: {
                        success: function (transactionid, response, arguments) {
                         data = JSON.parse(response.responseText),
                         data = data.studentList;
                         studentTable = new Y.DataTable({
                             columns: [
                                        { key: "name", label: "Student Name" },
                                        { key: "mark", label: "Student Marks" },
                                        { key: "roll", label: "Student Roll" }
                             data   : data,
                             scrollable: "y",

                        failure: function (transactionid, response, arguments) {
                         alert("Failure In Data Loading.");

  • The calling URL is,
  • The Firebug inspection for asynchronous call for servlet is,
  •  The HTML Inspection of the table is,


  • The Output in browser will render like,

Code Download:-

 Demo code download link