Jquery Slick Grid : Java Integration -Tutorial Savvy

“Slick Grid” is another Jquery plugin for showing data in table/grids.
The feature it includes are “DIV” structured based table. It can handle millions of rows.responsiveness is awesome.
We can get more information and download the library from the link:-

https://github.com/mleibman/SlickGrid/wiki

The files required by this plugin are :-

jquery-1.8.3.min.js,
   jquery-ui.js ,
             jquery.event.drag-2.0.min.js ,
    slick.core.js ,
    slick.grid.js,
    slick.grid.css,
            slick-default-theme.css,
   jquery-ui-1.8.16.custom.css

In this Demo , “A java servlet is getting called on DOM ready event and its response JSON is feed to SLICK GRID to display the data”.

The Project Structure,

The Student Object java file Student.java,

package com.sandeep.data.object;

public class Student {
 
 private String name;
 private String mark;
 private String address;
 
 public String getAddress() {
  return address;
 }

 public void setAddress(String address) {
  this.address = address;
 }

 public String getName() {
  return name;
 }

 public void setName(String name) {
  this.name = name;
 }

 public String getMark() {
  return mark;
 }

 public void setMark(String mark) {
  this.mark = mark;
 }

}

The Student Data Service 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);
   
   aStudent.setAddress("chennai "+i);

   listOfStudent.add(aStudent);
  }

  return listOfStudent;

 }
}

The Java Servlet 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.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();
  Gson gson = new GsonBuilder().setPrettyPrinting().create();
  String json = gson.toJson(lisOfStudent);
  out.print(json);

 }

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

  doGet(request, response);
 }

}

The HTML mark up and java script code slickGridDemo.jsp,

<html>
<head>
<title>SLICK GRID DEMO </title> 
<link rel="stylesheet" type="text/css" href="./css/slick.grid.css" />
<link rel="stylesheet" type="text/css" href="./css/slick-default-theme.css" />
<link rel="stylesheet" type="text/css" href="./css/jquery-ui-1.8.16.custom.css" />
<style type="text/css">
.table-container{
 width: 600px; 
 height: 500px;
}
</style> 
</head>
 <body>
 
 <div class="table-container" ></div>
 
   <script src="./js/jquery-1.8.3.min.js"></script>
   <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
   <script src="./js/jquery.event.drag-2.0.min.js"></script>
   <script src="./js/slick.core.js"></script>
   <script src="./js/slick.grid.js"></script>
   <script>
   $(document).ready( function(){
    
    var url ="http://localhost:8080/JquerySlickGridDemo/StudentDataServlet",
    
     columns = [
        {
             name: "Name",
             field: "name" ,
             id: "name"
            
         }, 
         {
             name: "Marks",
             field: "mark",
             id: "mark"
         },
                   {
                       name: "Address",
                       field: "address",
                       id: "address"
                   }
                ];
    
    $.get(url,function(datarows){
     
     new Slick.Grid(".table-container", datarows, columns);
     
    });
    
   });
   
   </script>
    </body>
</html>