Nowadays in almost all web applications when the user requests for any information, the result will be shown in the form of tables, graphs or charts etc. But the story has never ended by showing the results to the user in the tabular format. Because now- a-days the client wants more features in HTML tables like pagination, filtering the records, sorting, no of records to show etc. Creating a table along with all these features is a difficult job for a developer because it involves lot of designs and coding. But now it becomes very easy for the developer to develop with the help of jQuery datatable plugin. In this tutorial I will show how to use jQuery datatable in Spring MVC application.
jQuery Datatable
jQuery Datatable is a plugin which has very high elasticity to HTML tables. Using this plugin we can customize the HTML table to include various features like pagination, sorting, filtering, searching, records per page etc. Let see some of its features with an examples
Visit : To Learn about Advance Features of JQuery Datatable
How to use jQuery datatable in Spring MVC application
I am going to have Spring MVC application to demonstrate this application. I already wrote an article of How to create Spring MVC application using Spring Tool Suite. This might help you in creating a web application.
After creating a Spring MVC application using Spring Tool Suite we will get a project structure like this. Of course you will not able to see Employee.java, JQueryDatatableController.java and some of the html and css files because those files are manually added by me.
Project Structure
JQueryDatatableController
I have created a separate controller called JQueryDatatableController in which we are returning List of Employee objects as a JSON string.
package com.learnfromexamples.jquerydatatable;
import java.io.IOException;
import java.util.Locale;
import org.codehaus.jackson.JsonGenerationException;
import org.codehaus.jackson.map.JsonMappingException;
import org.codehaus.jackson.map.ObjectMapper;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import com.learnfromexamples.jquerydatatable.service.LoadDataService;
/**
* Handles requests for the application home page.
*/
@Controller
public class JQueryDatatableController {
private static final Logger logger = LoggerFactory.getLogger(JQueryDatatableController.class);
/**
* Simply selects the home view to render by returning its name.
* @throws IOException
* @throws JsonMappingException
* @throws JsonGenerationException
*/
@RequestMapping(value = "/", method = RequestMethod.GET)
public String home(Locale locale, Model model) throws JsonGenerationException, JsonMappingException, IOException {
logger.info("Welcome home! The client locale is {}.", locale);
LoadDataService dataService = new LoadDataService();
ObjectMapper mapper = new ObjectMapper();
model.addAttribute("employeeList", mapper.writeValueAsString(dataService.getEmployeeList()));
return "home";
}
}
To convert Java Object into JSON string I have used a Jackson api. Also instead of manually adding those jars, i have added those dependency in pom.xml file as below. So maven will take care of importing those jars.
<dependency>
<groupId>org.codehaus.jackson</groupId>
<artifactId>jackson-mapper-asl</artifactId>
<version>1.9.13</version>
</dependency>
pom.xml
<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/maven-v4_0_0.xsd">
<modelVersion>4.0.0</modelVersion>
<groupId>com.learnfromexamples</groupId>
<artifactId>jquerydatatable</artifactId>
<name>SpringMVCandJQueryDataTable</name>
<packaging>war</packaging>
<version>1.0.0-BUILD-SNAPSHOT</version>
<properties>
<java-version>1.6</java-version>
<org.springframework-version>4.1.1.RELEASE</org.springframework-version>
<org.aspectj-version>1.6.10</org.aspectj-version>
<org.slf4j-version>1.6.6</org.slf4j-version>
</properties>
<dependencies>
<!-- Spring -->
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-context</artifactId>
<version>${org.springframework-version}</version>
<exclusions>
<!-- Exclude Commons Logging in favor of SLF4j -->
<exclusion>
<groupId>commons-logging</groupId>
<artifactId>commons-logging</artifactId>
</exclusion>
</exclusions>
</dependency>
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-webmvc</artifactId>
<version>${org.springframework-version}</version>
</dependency>
<!-- AspectJ -->
<dependency>
<groupId>org.aspectj</groupId>
<artifactId>aspectjrt</artifactId>
<version>${org.aspectj-version}</version>
</dependency>
<!-- Logging -->
<dependency>
<groupId>org.slf4j</groupId>
<artifactId>slf4j-api</artifactId>
<version>${org.slf4j-version}</version>
</dependency>
<dependency>
<groupId>org.slf4j</groupId>
<artifactId>jcl-over-slf4j</artifactId>
<version>${org.slf4j-version}</version>
<scope>runtime</scope>
</dependency>
<dependency>
<groupId>org.slf4j</groupId>
<artifactId>slf4j-log4j12</artifactId>
<version>${org.slf4j-version}</version>
<scope>runtime</scope>
</dependency>
<dependency>
<groupId>log4j</groupId>
<artifactId>log4j</artifactId>
<version>1.2.15</version>
<exclusions>
<exclusion>
<groupId>javax.mail</groupId>
<artifactId>mail</artifactId>
</exclusion>
<exclusion>
<groupId>javax.jms</groupId>
<artifactId>jms</artifactId>
</exclusion>
<exclusion>
<groupId>com.sun.jdmk</groupId>
<artifactId>jmxtools</artifactId>
</exclusion>
<exclusion>
<groupId>com.sun.jmx</groupId>
<artifactId>jmxri</artifactId>
</exclusion>
</exclusions>
<scope>runtime</scope>
</dependency>
<!-- @Inject -->
<dependency>
<groupId>javax.inject</groupId>
<artifactId>javax.inject</artifactId>
<version>1</version>
</dependency>
<!-- Servlet -->
<dependency>
<groupId>javax.servlet</groupId>
<artifactId>servlet-api</artifactId>
<version>2.5</version>
<scope>provided</scope>
</dependency>
<dependency>
<groupId>javax.servlet.jsp</groupId>
<artifactId>jsp-api</artifactId>
<version>2.1</version>
<scope>provided</scope>
</dependency>
<dependency>
<groupId>javax.servlet</groupId>
<artifactId>jstl</artifactId>
<version>1.2</version>
</dependency>
<!-- Test -->
<dependency>
<groupId>junit</groupId>
<artifactId>junit</artifactId>
<version>4.7</version>
<scope>test</scope>
</dependency>
<dependency>
<groupId>org.codehaus.jackson</groupId>
<artifactId>jackson-mapper-asl</artifactId>
<version>1.9.13</version>
</dependency>
</dependencies>
<build>
<plugins>
<plugin>
<artifactId>maven-eclipse-plugin</artifactId>
<version>2.9</version>
<configuration>
<additionalProjectnatures>
<projectnature>org.springframework.ide.eclipse.core.springnature</projectnature>
</additionalProjectnatures>
<additionalBuildcommands>
<buildcommand>org.springframework.ide.eclipse.core.springbuilder</buildcommand>
</additionalBuildcommands>
<downloadSources>true</downloadSources>
<downloadJavadocs>true</downloadJavadocs>
</configuration>
</plugin>
<plugin>
<groupId>org.apache.maven.plugins</groupId>
<artifactId>maven-compiler-plugin</artifactId>
<version>2.5.1</version>
<configuration>
<source>1.6</source>
<target>1.6</target>
<compilerArgument>-Xlint:all</compilerArgument>
<showWarnings>true</showWarnings>
<showDeprecation>true</showDeprecation>
</configuration>
</plugin>
<plugin>
<groupId>org.codehaus.mojo</groupId>
<artifactId>exec-maven-plugin</artifactId>
<version>1.2.1</version>
<configuration>
<mainClass>org.test.int1.Main</mainClass>
</configuration>
</plugin>
</plugins>
</build>
</project>
Employee.java
We are going to show employee details in a HTML table, so I have created Employee object.
package com.learnfromexamples.jquerydatatable.modal;
public class Employee {
private String Name;
private String Desgination;
private String Salary;
private String Country;
public Employee(String name, String desgination, String salary, String country) {
this.Name = name;
this.Desgination = desgination;
this.Salary = salary;
this.Country = country;
}
public String getName() {
return Name;
}
public void setName(String name) {
this.Name = name;
}
public String getDesgination() {
return Desgination;
}
public void setDesgination(String desgination) {
this.Desgination = desgination;
}
public String getSalary() {
return Salary;
}
public void setSalary(String salary) {
this.Salary = salary;
}
public String getCountry() {
return Country;
}
public void setCountry(String country) {
this.Country = country;
}
}
LoadDataService
In LoadDataService i have loaded Employee Objects into an Arraylist and those list are being returned to Controller.
package com.learnfromexamples.jquerydatatable.service;
import java.util.ArrayList;
import java.util.List;
import com.learnfromexamples.jquerydatatable.modal.Employee;
public class LoadDataService {
public static List<Employee> getEmployeeList(){
List<Employee> employeeList = new ArrayList<Employee>();
Employee employee1 = new Employee("Sridharan","Junior Blogger","5000","India");
Employee employee2 = new Employee("Arul Raj","Senior Blogger","105000","China");
Employee employee3 = new Employee("Priya","Associate","21000","Australia");
Employee employee4 = new Employee("Sam","Associate","20030","Australia");
Employee employee5 = new Employee("Ram","Associate","2020","Australia");
Employee employee6 = new Employee("Avinash","Associate","6000","Australia");
Employee employee7 = new Employee("Prabha","Associate","34000","Australia");
Employee employee8 = new Employee("Sweety","Associate","4000","Australia");
Employee employee9 = new Employee("Kinshuka","Programmer","12000","Japan");
Employee employee10 = new Employee("Leena","Programmer","12000","Japan");
Employee employee11 = new Employee("Chandra","Programmer","32000","Japan");
Employee employee12 = new Employee("Loga","Programmer","22000","Japan");
Employee employee13 = new Employee("Elumalai","Programmer","20700","Japan");
Employee employee14 = new Employee("Boosh","Senior Developer","2000","Taiwan");
Employee employee15 = new Employee("Edward","Senior Developer","5000","Taiwan");
Employee employee16 = new Employee("Niranjana","Senior Developer","7000","Taiwan");
Employee employee17 = new Employee("Murali","Senior Developer","2500","Taiwan");
Employee employee18 = new Employee("Krihna","Senior Developer","2700","Taiwan");
Employee employee19 = new Employee("Beema","Senior Developer","2250","Taiwan");
Employee employee20 = new Employee("Surya","Senior Developer","2720","Taiwan");
Employee employee21 = new Employee("Prakash","Senior Associate","2000","Russia");
Employee employee22 = new Employee("Raj","Senior Associate","2000","Russia");
Employee employee23 = new Employee("Chudambaram","Senior Associate","2000","Russia");
Employee employee24 = new Employee("Boosh","Senior Associate","112000","Russia");
Employee employee25 = new Employee("Elango","Senior Associate","322000","Russia");
Employee employee26 = new Employee("Sundar","Senior Associate","432000","Russia");
Employee employee27 = new Employee("Gnans","Senior Associate","252000","Russia");
Employee employee28 = new Employee("Sathy Nadela","Senior Associate","211000","Russia");
Employee employee29 = new Employee("Sundhar Pichai","Manager","2000","Singapore");
Employee employee30 = new Employee("Murari","Manager","234000","Singapore");
Employee employee31 = new Employee("Manimala","Manager","23000","Singapore");
Employee employee32 = new Employee("Sandhya","Manager","20800","Singapore");
Employee employee33 = new Employee("Praveen","Manager","20600","Singapore");
Employee employee34 = new Employee("Pradeep","Manager","20900","Singapore");
Employee employee35 = new Employee("Jairaj","Senior Manager","132000","UAE");
Employee employee36 = new Employee("Paresh","Senior Manager","2312000","UAE");
Employee employee37 = new Employee("Anurag","Senior Manager","1232000","UAE");
Employee employee38 = new Employee("Ashwini","Senior Manager","2342000","UAE");
Employee employee39 = new Employee("Naveen","Senior Manager","3232000","UAE");
Employee employee40 = new Employee("Abinav","Senior Manager","862000","UAE");
Employee employee41 = new Employee("Kamala","Senior Manager","5452000","UAE");
Employee employee42 = new Employee("Sai","Senior Vice President","232000","France");
Employee employee43 = new Employee("Kumar","Senior Vice President","5452000","France");
Employee employee44 = new Employee("Ganesh","Senior Vice President","562000","France");
Employee employee45 = new Employee("Rashid","Senior Vice President","56562000","France");
Employee employee46 = new Employee("Venu","Senior Vice President","542000","France");
Employee employee47 = new Employee("Sasi","Senior Vice President","562000","France");
Employee employee48 = new Employee("Pradeep","Vice President","122000","Italy");
Employee employee49 = new Employee("Kumar","Vice President","20300","Italy");
Employee employee50 = new Employee("Nirmala","Vice President","240600","Italy");
Employee employee51 = new Employee("Shymala","Vice President","200560","Italy");
Employee employee52 = new Employee("Padma","Vice President","203400","Italy");
Employee employee53 = new Employee("Prema","Vice President","7562000","Italy");
Employee employee54 = new Employee("Kirubha","Vice President","562000","Italy");
Employee employee55 = new Employee("Adithya","Assistant Manage","42000","Canada");
Employee employee56 = new Employee("Akileash","Assistant Manage","52000","Canada");
Employee employee57 = new Employee("Paresh","Assistant Manage","245000","Canada");
Employee employee58 = new Employee("Rashid","Assistant Manage","209400","Canada");
Employee employee59 = new Employee("Naveen","Assistant Manage","672000","Canada");
Employee employee60 = new Employee("Rajesh","Assistant Manage","642000","Canada");
Employee employee61 = new Employee("Abinav","Assistant Manage","542000","Canada");
Employee employee62 = new Employee("Loga","Senior Software Engineer","2342000","New Zealand");
Employee employee63 = new Employee("Chandra","Senior Software Engineer","200230","New Zealand");
Employee employee64 = new Employee("Sam","Senior Software Engineer","202300","New Zealand");
Employee employee65 = new Employee("Ram","Senior Software Engineer","231000","New Zealand");
Employee employee66 = new Employee("Venu","Senior Software Engineer","432000","New Zealand");
Employee employee67 = new Employee("Kinshuka","Senior Software Engineer","452000","New Zealand");
Employee employee68 = new Employee("Praveen","Senior Software Engineer","542000","New Zealand");
employeeList.add(employee68);
employeeList.add(employee67);
employeeList.add(employee66);
employeeList.add(employee65);
employeeList.add(employee64);
employeeList.add(employee63);
employeeList.add(employee62);
employeeList.add(employee62);
employeeList.add(employee61);
employeeList.add(employee60);
employeeList.add(employee59);
employeeList.add(employee58);
employeeList.add(employee57);
employeeList.add(employee56);
employeeList.add(employee55);
employeeList.add(employee54);
employeeList.add(employee53);
employeeList.add(employee52);
employeeList.add(employee51);
employeeList.add(employee50);
employeeList.add(employee49);
employeeList.add(employee48);
employeeList.add(employee47);
employeeList.add(employee46);
employeeList.add(employee45);
employeeList.add(employee44);
employeeList.add(employee43);
employeeList.add(employee42);
employeeList.add(employee41);
employeeList.add(employee40);
employeeList.add(employee39);
employeeList.add(employee38);
employeeList.add(employee37);
employeeList.add(employee36);
employeeList.add(employee35);
employeeList.add(employee34);
employeeList.add(employee33);
employeeList.add(employee32);
employeeList.add(employee31);
employeeList.add(employee30);
employeeList.add(employee29);
employeeList.add(employee28);
employeeList.add(employee27);
employeeList.add(employee26);
employeeList.add(employee25);
employeeList.add(employee24);
employeeList.add(employee23);
employeeList.add(employee22);
employeeList.add(employee21);
employeeList.add(employee20);
employeeList.add(employee19);
employeeList.add(employee18);
employeeList.add(employee17);
employeeList.add(employee16);
employeeList.add(employee15);
employeeList.add(employee14);
employeeList.add(employee13);
employeeList.add(employee12);
employeeList.add(employee11);
employeeList.add(employee10);
employeeList.add(employee9);
employeeList.add(employee8);
employeeList.add(employee7);
employeeList.add(employee6);
employeeList.add(employee5);
employeeList.add(employee4);
employeeList.add(employee3);
employeeList.add(employee2);
employeeList.add(employee1);
return employeeList;
}
@Override
public String toString() {
return "LoadDataService [getClass()=" + getClass() + ", hashCode()=" + hashCode() + ", toString()="
+ super.toString() + "]";
}
}
Under resource folder I have created three other folders called css, js, images to maintain the corresponding css, js and image files. This modularity in project structure will help us in good understanding of a application.
To get jquery datatable related styles we have to include jquery.dataTables.css and jquery.dataTables.min.css. Also I have included some of the jquery datatable images in images folder. Most importantly we have to include jquery js file and datatable js file. I have used jquery-1.12.1.min.js and jquery.dataTables.js in js folder.
Common.css
In common.css I have included our project specific stlyes like background color, table styles etc.
body{
background-color: #eee;
}
img.dataTableExample{
width:50%;
padding-left: 25%;
}
div.dataTables_wrapper{
padding-left:15%;padding-right:15%;
}
th {
background-color: #4CAF50;
color: white;
}
tr:nth-child(even) {background-color: #f2f2f2}
home.jsp
To get modularity in jsp’s I have created a separate folder called includes and created separate jsp files like header.jsp and body.jsp to perform corresponding actions alone. Also I have included all those jsp’s in the home.jsp.
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %> <%@taglib prefix="spring" uri="http://www.springframework.org/tags"%> <%@ page session="false" %> <html> <jsp:include page="includes/header.jsp"/> <jsp:include page="includes/body.jsp"/> <jsp:include page="includes/footer.jsp"/>
header.jsp
In header.jsp, I have included the css and js files alone.
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@taglib prefix="spring" uri="http://www.springframework.org/tags"%>
<%@ page session="false" %>
<html>
<spring:url value="/resources/js/jquery-1.12.1.min.js" var="jqueryJs" />
<script src="${jqueryJs}"></script>
<spring:url value="/resources/js/jquery.dataTables.js" var="datatable" />
<script src="${datatable}"></script>
<spring:url value="/resources/css/jquery.dataTables.css" var="jquerydataTables" />
<link href="${jquerydataTables}" rel="stylesheet" />
<spring:url value="/resources/css/jquery.dataTables.min.css" var="jquerydataTablesMin" />
<link href="${jquerydataTablesMin}" rel="stylesheet" />
<spring:url value="/resources/css/common.css" var="common" />
<link href="${common}" rel="stylesheet" />
body.jsp
In body.jsp, at the top I have included an image, followed by I have created a html table along with header tags.
In <script> tag inside document.ready function I have taken JSON string and assigned it into a javascript variable called data.
Reason for eval function
In JQueryDatatableController we have assigned the JSON in employeeList and passed it to the view. In javascript we are using ${employeeList} to get those values. Also the values which we are returning from controller is not a actual JSON Object it’s a JSON string, Because writeValueAsString method will create the Java Object into JSON string only, not as a JSON Object. So in order to convert JSON Object to JSON Object we have used eval method.
Note:
Mostly it’s better to use JSON object as an input for dataTable plugin. Because apart from jquery Datatable built in customization, our user defined customization’s also will be easily accomplished if we use input as JSON object.
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@taglib prefix="spring" uri="http://www.springframework.org/tags"%>
<%@ page session="false" %>
<html>
<head>
<title>JQuery Datatable + Spring MVC Example</title>
</head>
<body>
<div>
<img class="dataTableExample" src="resources/images/JQueryDatatableandSpringMVC.png">
</div>
<table id="example" class="display" cellspacing="0" width="100%" style="overflow-x:auto">
<thead>
<tr>
<th>Name</th>
<th>Desgination</th>
<th>Salary</th>
<th>Country</th>
</tr>
</thead>
</table>
</body>
</html>
<script type="text/javascript">
$(document).ready(function(){
var data =eval('${employeeList}');
var table = $('#example').DataTable( {
"aaData": data,
"aoColumns": [
{ "mData": "name"},
{ "mData": "desgination"},
{ "mData": "salary"},
{ "mData": "country"}
]
});
});
</script>
jQuery Datatable Options
jQuery datatable provides various options for the HTML table. We will see some of the mandatory and important options here.
aaData: If we provide JSON object to this aaData, it will take care of forming html table.
aoColumns: In employee object we are having variables called name, designation etc. If we specify those attributes here then corresponding data will be picked for each column.
Hit the browser using this url :http://localhost:8080/jquerydatatable/
The result page will be like this.
We have not used any other options, because by default jQuery datatable will provide Search, Records per page, pagination features etc. Also its very easy to configure it. Let’s see some of the example.
paginate: By default pagination will be true with 10 records per page. If we don’t want this option then make paginate as false.
Syntax:
“paginate”:false
<script type="text/javascript">
$(document).ready(function(){
var data =eval('${employeeList}');
var table = $('#example').DataTable( {
"aaData": data,
"aoColumns": [
{ "mData": "name"},
{ "mData": "desgination"},
{ "mData": "salary"},
{ "mData": "country"}
],
"paging":false
});
});
</script>
So the table will display without pagination.
Ordering: By default ordering will be true for the table. If we want to disable that, we can use the option called “ordering“. If we make the ordering as false then if we click any column header then ordering will not happen.
Syntax:
ordering:false
<script type="text/javascript">
$(document).ready(function(){
var data =eval('${employeeList}');
var table = $('#example').DataTable( {
"aaData": data,
"aoColumns": [
{ "mData": "name"},
{ "mData": "desgination"},
{ "mData": "salary"},
{ "mData": "country"}
],
"paging":true,
"pageLength":20,
"ordering":true
});
});
</script>
order: If we want sort any columns either ascending or descending order, then use “order” option. In the below image you can see the column name is sorted alphabetically.
“order”:[0,”asc”]
<script type="text/javascript">
$(document).ready(function(){
var data =eval('${employeeList}');
var table = $('#example').DataTable( {
"aaData": data,
"aoColumns": [
{ "mData": "name"},
{ "mData": "desgination"},
{ "mData": "salary"},
{ "mData": "country"}
],
"paging":true,
"pageLength":20,
"ordering":true,
"order":[0,"asc"]
});
});
</script>
We have seen only limited features of jQuery datatable in Spring MVC application. To know more its features, visit datatables.net
Related Tutorial: Advance Features of JQuery Datatable with Example in Spring MVC
If you have any queries in this jQuery datatable in Spring MVC application tutorial please comment your queries below and if you like this tutorial please share it with your friends and colleagues.
Click below download link to get jQuery datatable in Spring MVC.
Very Useful tutorial. Thanks a lot. I want to show an hyperlink in one of the column, how can i achieve that.
Very good plugin and very good article for developers as well. Thanks for sharing this blog.
Nice, Simple and friendly.
can you add event handling part please? ( for example – show an alert with the data on selected row)
Thanks a lot. Ya am working on it. Once done, i will post about that. jQuery datatable is a plugin which is having more features and customization. Will post about more features about that soon.
Can U provide me the Solution regarding the export functionlity
how to add export functionality in above tutorial ?
Hi, This is a very nice article for starters who want to use datatable with spring mvc. It would be great if you can come up with tutorial for submitting data from a data table and persisting them through spring mvc.
Hi,great example sir.Can you please tell me how to add hyperlink to this data……..
Hi Ramesh, Thanks a lot. Inorder ot add hyperlink , you have to use columnDefs attribute. I have created an example also.
Please visit below link for more details.
Advance features of jQuery Datatable with Spring MVC
http://learnfromexamples.com/jquery-datatable-in-spring-mvc-with-example/
I am new to jquery and datatables and I am trying to use this example .
However my datatable shows no data , only the heading in the html,but the when i view source I can see the data showing from
var data =eval(‘${employeeList}’)
what could be the issue?
Dear
How to include sub row in the table if the data of the row has too many columns..
Please let me know
I am new for jquery data table , but this article is very good
Hi Suresh,
You mean to ask, Grouping of columns? Because Jquery Datatable will have Grouping feature as well.
If you are not asking about Jquery Datatable Grouping, You Can enable JQuery Datatable Scroll Feature as well.
$(‘#example’).DataTable( {
“scrollX”: true,
“scrollY”: true
} );
I like to use the above code dynamically using spring mvc hibernate and database connectivity. I tried with many examples but I am getting null pointer exception. Is there any link or any code so that I can move further.
Null pointer exception is basically a Java exception. Need more details to fix this.
Hi,
I am getting empty table when fetching values from database.
In the variable data I am getting my values as JSON, but not in table.
Kindly suggest a better option.
~~¶¶¶~~
$(document).ready(function(){
var data =eval(‘${patientData}’); //name mentioned in controller using model attribute
var table = $(‘#datatable-responsive’).DataTable( { //id name of a table
“sAjaxSource”: “/patientList”, //request mapping for the particular url
“sAjaxDataProp”: “”,
“aaData”: data,
“aoColumns”: [
{ “mData”: “id”},
{ “mData”: “patientId”},
{ “mData”: “patientName”},
{ “mData”: “lastName”},
{ “mData”: “gender”},
{ “mData”: “dob”},
{ “mData”: “city”}
],
“paging”:true,
“retrieve”:true
});
});
~~¶¶¶~~
Check whether variable “data” is of type json or String with json structure.
I have converted the string into object and passed the value .
$(document).ready(function(){
var data=jQuery.parseJSON(‘${patientData}’);
var table=$(‘#datatable-responsive’).dataTable( {
“sAjaxSource”: “../patientList”,
“paging”:true,
“retrieve”:true,
“aaData”: data,
“bJQueryUI”: true,
“aoColumns”: [
{ “aaData”: “patientId”},
{ “aaData”: “patientName”},
{ “aaData”: “lastName”},
{ “aaData”: “gender”},
{ “aaData”: “dob”},
{ “aaData”: “city”}
],
});
});
Also tried this method:
$(document).ready(function(){
debugger;
var data =eval(‘${patientData}’);
var data=jQuery.parseJSON(‘${patientData}’);
$.ajax({url: “/Java_Analytics/patientList”, success: function(result){
$(‘#datatable-responsive’).dataTable( {
“paging”:true,
“sAjaxSource”: result,
“retrieve”:true,
“bJQueryUI”: true,
“aoColumns”: [
{ “mData”: “patientId”},
{ “mData”: “patientName”},
{ “mData”: “lastName”},
{ “mData”: “gender”},
{ “mData”: “dob”},
{ “mData”: “city”}
],
});
}});
Also tried using aadata and mdata.
I am unable to bind the values into table.
What changes should be done?
You have to make a like this
“aaData”: data,
“aoColumns”: [
{ “mData”: “patientId”},
{ “mData”: “patientName”},
{ “mData”: “lastName”},
{ “mData”: “gender”},
{ “mData”: “dob”},
{ “mData”: “city”}
]
how do i check that the data is holding a JSON object or JSON string?
hey, how should I do if I want to add update data and delete data button in script?
For Adding and Deleting, u have a make a service call and the existing data should be added/deleted.