YUI Asynchronous Data Table Load -Tutorial Savvy

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() {
  super();
 }

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

  response.setContentType("application/json");
  PrintWriter out = response.getWriter();
  ListOfStudent lisOfStudent = StudentDataService.getStudentList();
  Gson gson = new GsonBuilder().setPrettyPrinting().create();
  String json = gson.toJson(lisOfStudent);
  System.out.println(json);
  out.print(json);

 }

 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>
<html>
    
    <head>
        <title>YUI DataTable With Async Data From</title>
        <script src="http://yui.yahooapis.com/3.8.0/build/yui/yui-min.js"></script>
        <style>
            .li{
                color:grey;
                font-size: 12px;
                font-style: bold;
            }
            
            .file-content{
             color:green;
                font-size: 20px;
                font-style: italic;
            }
        </style>
    </head>
    
    <body class="yui3-skin-sam">
    
        <div id="yui-data-table-ajax"></div>
        
        <script>
            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",
                             
                                height:"250px"
                             
                         }).render("#yui-data-table-ajax");

                        },
                        
                        failure: function (transactionid, response, arguments) {
       
                         alert("Failure In Data Loading.");
                        }
                        
                    }
                };
                  
              Y.io(urifordata,configuration);
                
            });
        </script>
    </body>

</html>