This tutorial explains the implementation of Datatables with Spring MVC. Most of you all will be aware of usage of data tables in a web application, here we will see how to integrate it with Spring MVC application. This is like any other web page that we create in our MVC application, the only different thing here is using jQuery’s data table to display the data in a tabular form and with additional options like paging, searching and sorting.
Initially we will create a Dynamic Web Project in eclipse, and we will end up with something like this in the project structure.
Step 1: Create a dynamic web project, name it “DataTableWithSpring”
Step 2: Add required libraries in the lib folder. All the required Spring jars are added as shown in below screenshot.
Step 3: Create dispatcher-servlet.xml file under WEB-INF folder, which is nothing but the Spring Front Controller which controls the request and response form and to the user.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
<?xml version="1.0" encoding="UTF-8"?> <beans xmlns="http://www.springframework.org/schema/beans" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:context="http://www.springframework.org/schema/context" xmlns:tx="http://www.springframework.org/schema/tx" xsi:schemaLocation=" http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans-3.0.xsd http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context-3.0.xsd http://www.springframework.org/schema/tx http://www.springframework.org/schema/tx/spring-tx-3.0.xsd"> <context:annotation-config /> <context:component-scan base-package="com.code2java" /> <bean id="jspViewResolver" class="org.springframework.web.servlet.view.InternalResourceViewResolver"> <property name="viewClass" value="org.springframework.web.servlet.view.JstlView" /> <property name="prefix" value="/WEB-INF/view/" /> <property name="suffix" value=".jsp" /> </bean> </beans> |
Step 4: Update the web.xml file, which is most important in any web application, for servlet mapping to be handled.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<?xml version="1.0" encoding="UTF-8"?> <web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd" id="WebApp_ID" version="3.0"> <display-name>DataTableWithSpring</display-name> <servlet> <servlet-name>dispatcher</servlet-name> <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class> <load-on-startup>1</load-on-startup> </servlet> <servlet-mapping> <servlet-name>dispatcher</servlet-name> <url-pattern>*.do</url-pattern> </servlet-mapping> <welcome-file-list> <welcome-file>/WEB-INF/view/welcome.jsp</welcome-file> </welcome-file-list> </web-app> |
Step 5: Add welcome file to be displayed on application startup. It is added under /WEB-INF/view folder. On this page, we have a link to go to new page which will display the data table. This link will call the controller method, which will serve the request and load the data table. We need to include all the required CSS and JS files which are required for datatables. Same is bundled in the attached source code at the end of this blog.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<%@ 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>code2java - Datatables with Spring example</title> </head> <body> <label>Welcome to code2java.com</label> <br> <!-- redirecting to Spring Controller to load the Data table page --> <a href="loadDatatable.do">Load the Datatable</a> </body> </html> |
Step 6: Create a new jsp page – “myDatatables.jsp” which consists of the actual data to be displayed in data table. We have used JSTL’s forEach loop to iterate over the ‘model’ object sent from controller.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 |
<%@ page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%> <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%> <!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>code2java - My Datatable</title> <!-- Below are the Style Sheets required for Data Tables. These can be customized as required --> <link rel="stylesheet" type="text/css" href="css/db_site_ui.css"> <link rel="stylesheet" type="text/css" href="css/demo_table_jui.css"> <link rel="stylesheet" type="text/css" href="css/jquery-ui.css"> <!-- Below is the jQuery file required for using any Jquery component. --> <script type="text/javascript" src="js/jquery-1.11.3.js"></script> <!-- Below are the jQuery scripts required for Data Tables. --> <script type="text/javascript" src="js/jquery.dataTables.min.js"></script> <!-- Initialization code of data table at the time of page load. --> <script> $(document).ready(function() { $('#myDatatable').DataTable({ "jQueryUI" : true, "pagingType" : "full_numbers", "lengthMenu" : [ [ 5, 10, 50, -1 ], [ 5, 10, 50, "All" ] ] /* few more options are available to use */ }); }); </script> </head> <body> <h1>www.code2java.com</h1> <h3>The Datatable is loaded.</h3> <div style="width: 80%"> <!-- Below table will be displayed as Data table --> <table id="myDatatable" class="display datatable"> <thead> <tr> <th>Sr. No.</th> <th>Language</th> <th>Version</th> </tr> </thead> <tbody> <!-- Iterating over the list sent from Controller --> <c:forEach var="list" items="${model}"> <tr> <td>${list.srNo}</td> <td>${list.language}</td> <td>${list.version}</td> </tr> </c:forEach> </tbody> </table> </div> </body> </html> |
Step 7: We have to create a controller class, DTController.java. This will contain the method that will return the Model and View consisting of model object and view to render, in this case
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 |
package com.code2java.controllers; /** * @author code2java */ import java.util.ArrayList; import java.util.List; import org.springframework.stereotype.Controller; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.servlet.ModelAndView; import com.code2java.models.LanguageModel; @Controller public class DTController { /** * @author code2java * This method will be called when user clicks on link showed on welcome.jsp page * The request is mapped using @RequestMapping annotation. * @return */ @RequestMapping(value = "/loadDatatable") public ModelAndView loadDatatable() { List<LanguageModel> model = new ArrayList<LanguageModel>(); model.add(new LanguageModel(1, "Java", "1.0")); model.add(new LanguageModel(2, "Java", "1.1")); model.add(new LanguageModel(3, "Java", "1.2")); model.add(new LanguageModel(4, "Java", "1.3")); model.add(new LanguageModel(5, "Java", "1.4")); model.add(new LanguageModel(6, "Java", "1.5")); model.add(new LanguageModel(7, "Java", "1.6")); model.add(new LanguageModel(8, "Java", "1.7")); model.add(new LanguageModel(9, "Java", "1.8")); model.add(new LanguageModel(10, "CSS", "1.0")); model.add(new LanguageModel(11, "CSS", "2.0")); model.add(new LanguageModel(12, "CSS", "3.0")); model.add(new LanguageModel(13, "HTML", "1")); model.add(new LanguageModel(14, "HTML", "2")); model.add(new LanguageModel(15, "HTML", "3")); model.add(new LanguageModel(16, "HTML", "4")); model.add(new LanguageModel(17, "HTML", "5")); /* * 1. view : myDatatable * 2. model - to be accessed on JSP * 3. model - Object to be sent to JSP page. * */ return new ModelAndView("myDatatable","model",model); } } |
Step 8: We are done with the implementation. Run your application and output will be something like below:
Output : Welcome Page.
Output : Datatables Page.
Hope this will help you.
Download the complete source – DataTableWithSpring
Regards,
Nikhil Naoghare.
Where is the LamguageModel.java file ?
What is it ? I can’t find it.
Plaese help
You can find it in the download folder under com.models.* package. It is just a POJO class that will hold the values for language
Thanks a lot Nikhil