I use jQuery DataTables and get this warning message:
DataTables warning: table=userTable - Invalid JSON response
A servlet fetch users from MySQL which I want to display in a jQuery Datatable, but Ajax can't parse the JSON or the JSON is generated wrong in servlet?
Servlet:
List<UserDTO> users = this.service.getAllUser();
Gson gson = new Gson();
request.setAttribute("users", gson.toJson(users));
request.getRequestDispatcher("listAllUser.jsp").forward(request, response);
JSP:
<%@ 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>Registered Users</title>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script
src="https://cdn.datatables.net/1.10.9/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet"
href="http://cdn.datatables.net/1.10.9/css/jquery.dataTables.min.css" />
<link rel="stylesheet"
href="http://code.jquery.com/ui/1.11.4/themes/flick/jquery-ui.css">
<script>
$(document).ready(function() {
$('#userTable').dataTable({
"processing" : true,
"serverSide" : true,
"ajax" : {
"url" : "ListAllUserServlet",
"type" : "POST"
},
"columns" : [ {
"data" : "id"
}, {
"data" : "userName"
}, {
"data" : "firstName"
}, {
"data" : "lastName"
}, {
"data" : "email"
}, {
"data" : "phone"
}, {
"data" : "location"
}, {
"data" : "password"
}, {
"data" : "gender"
}, {
"data" : "birthday"
} ]
});
});
</script>
</head>
<body>
<table id="userTable" class="display">
<thead>
<tr>
<th colspan="10" id="userList">Users</th>
</tr>
<tr>
<th>User id</th>
<th>User name</th>
<th>First Name</th>
<th>Last Name</th>
<th>Email</th>
<th>Phone</th>
<th>Location</th>
<th>Password</th>
<th>Gender</th>
<th>Birth date</th>
</tr>
</thead>
<tfoot>
<tr>
<td colspan="10"><a href="index.jsp" id="toIndex">Back</a></td>
</tr>
</tfoot>
</table>
</body>
</html>
JSON generated by servlet:
[
{
"id": 1,
"userName": "userName1",
"firstName": "firstName1",
"lastName": "lastName1",
"email": "[email protected]",
"phone": "36202080085",
"location": "location1",
"password": "password1",
"gender": "m",
"birthday": "1-02-2015"
}
]
DataTables warns about the use of them by default, as the majority of the time they are not intended for display - for example, rather than showing null in the table, you might want to show Not yet set, or simply an empty string (empty cell). For this, DataTables has a columns. defaultContent option.
Basically, WordPress needs to communicate with the server while you are editing a blog post. It relies on getting responses from the web hosting server in the background. This response is usually in JSON format which is used to quickly transport data using JavaScript.
There are couple issues with your code:
You have enabled server-side processing mode with "serverSide": true
but your data is formatted for client-side processing mode instead. Remove "serverSide": true
to use client-side processing mode.
You need to use dataSrc: ""
ash shown below to match your JSON data format, see dataSrc
for more information.
"ajax" : {
"url" : "ListAllUserServlet",
"type" : "POST",
"dataSrc": ""
},
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With