I am trying to get the data from Spring MVC and show it in datatables.
On a webpage, the datatable is showing processing.
I tried to console out my value and in console my arrays are showing.
Can anyone help out?
JSP table:
<div>
<table id="myTable" class="table table-bordered table-striped">
<thead>
<tr>
<th class="col-sm-1">Department Id</th>
<th class="col-sm-3">Department Name</th>
</tr>
</thead>
</table>
</div>
JavaScript code:
<script>
$(document).ready(function () {
table = $("#myTable").DataTable({
"processing": true, // for show progress bar
"serverSide": true, // for process server side
"filter": false, // this is for disable filter (search box)
"orderMulti": false, // for disable multiple column at once
"ajax": {
"url": "/com-employee-record/department/listDataTable.json",
"type": "POST",
"datatype": "json",
"success" : function(data, i){
console.log(data[0]);
}
},
"columns" : [
{ "data": "department_id"},
{ "data": "department_name"}
]
});
});
</script>
Controller code:
#RequestMapping(value = "/listDataTable.json", method = RequestMethod.POST, headers = "Accept=application/json")
#ResponseBody
public List<Department> dataTable(HttpServletRequest request) {
return departmentService.getDepartments();
}
Here is what my console is showing:
{department_id: 1, department_name: "Information Technology"}
I think you need to use the:
"dataSrc": ""
setting, because your API response does not have a top level js property called "data".
The code below is working.
<script src="https://cdn.datatables.net/v/dt/jq-3.3.1/dt-1.10.18/datatables.min.js"></script>
<script>
$(document).ready(function() {
$('#example3').DataTable({
"ajax": {
"type": "GET",
"url": 'https://jsonplaceholder.typicode.com/todos',
"contentType": 'application/json; charset=utf-8',
"dataSrc": "",
},
"columns": [
{
"data": "id"
},
{
"data": "title"
}
]
});
});
</script>
<table id="example3" class="display" style="width:100%">
</table>
Everything seems to be fine just change ajax part of your code to this
"ajax": {
"url": "/com-employee-record/department/listDataTable.json",
"type": "POST",
"contentType": "application/json",
"dataSrc" : "[]"
},
dataSrc was missing in your code. No need to have success block.
Related
I want to create a pie chart with a dynamic data in highcharts
i really need your help
i wanna make a pie chart that counts the gender
here is my code
im really stuck there
..........................................................................
Controller :
#RequestMapping("/piechart")
public ResponseEntity<?> getAll(Model model) {
List<user> list = userRepository.allusers();
return new ResponseEntity<>(list,HttpStatus.OK);
}
Repository :
#Query(value=" SELECT *,count(*) AS count_gender FROM user GROUP BY gender", nativeQuery = true)
List<User> allusers();
HTML:
<body>
<div id="container" style="width: 550px; height: 400px; margin: 0 auto"></div>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script th:inline="javascript">
$.ajax({
url: 'piechart',
dataType:'json',
success: function(result){
var series=[];
var data= [];
for(var i=0;i<result.length;i++){
var object={};
object.name=result[i].gender;
object.y=result[i];
data.push(object);
}
var seriesObject={
name:'percentage',
colorByPoint: true,
data: data
}
series.push(seriesObject);
drewPiechart(series);
}
})
function drewPiechart(series){
Highcharts.setOptions({
colors: ['#058DC7', '#50B432', '#ED561B', '#DDDF00', '#24CBE5', '#64E572', '#FF9655', '#FFF263', '#6AF9C4']
});
Highcharts.chart('container', {
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'pie'
},
title: {
},
tooltip: {
formatter: function(){
return 'y value: '+this.y+'<br/>is '+this.percentage+'% of total ('+this.total+')';
}
},
accessibility: {
point: {
valueSuffix: '%'
}
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
format: '<b>{point.name}</b>: {point.percentage:.1f} %'
},
showInLegend: true
}
},
series: series
});
}
</script>
</body>
</html>
here is my result:
it shows nothing bcz i didnt know how to get the count result of the query on the yaxis
I have a data structure, it contains primitive and complex values.
public class Topic{
private String topicUrl = "";
private String key = "";
private String name = "";
private String value = "";
private String type;//RECORD/ARRAY/ENUM/PRIMITIVE
private List<String> enumValues = new ArrayList<>();
private List<Topic> fieldList = new ArrayList<>();
//getters setters
//isEnum()
//isPrimitive()
//isRecord()
}
And I have created thymeleaf frontend to submit Topic objects. only value fields of primitive objects can be edited on frontend. example object is like
Before submit as JSON:
{
"topicUrl": "url",
"key": "",
"name": "object1",
"value": "",
"type": "RECORD",
"fieldList": [
{
"topicUrl": "",
"key": "",
"name": "object1.1",
"value": "",
"type": "INT",
"fieldList": []
},
{
"topicUrl": "",
"key": "",
"name": "object1.2",
"value": "",
"type": "RECORD",
"fieldList": [
{
"topicUrl": "",
"key": "",
"name": "object1.2.1",
"value": "",
"type": "INT",
"fieldList": []
}]
}]
}
After submit as JSON:
{
"topicUrl" : "url",
"key" : "",
"name" : "object1",
"value" : "",
"type" :"RECORD",
"fieldList":[{
"topicUrl" : "",
"key" : "",
"name" : "object1.1",
"value" : "11",
"type" :"INT",
"fieldList":[]
},{
"topicUrl" : "",
"key" : "",
"name" : "object1.2",
"value" : "",
"type" :"RECORD",
"fieldList":[{
"topicUrl" : "",
"key" : "",
"name" : "object1.2.1",
"value" : "121",
"type" :"INT",
"fieldList":[]
}]
}]}
Form page
<form th:action="#{/writeTopic}" th:object="${selectedTopic}" method="post" class="form-horizontal">
<fieldset>
<input type="submit" class="btn btn-primary" th:value="Write"></input>
<table class="table table-striped table-bordered">
<tbody>
<tr>
<td th:text="TopicUrl"></td>
<td>
<input readonly th:field="*{topicUrl}" class="form-control form-control-lg"/>
</td>
</tr>
<tr>
<td th:text="Key"></td>
<td>
<input th:field="*{key}" class="form-control form-control-lg"/>
</td>
</tr>
</table>
<div th:replace="fragments/topicFieldsTable :: topicFieldsTable(topic=${selectedTopic})"></div>
</fieldset>
</form>
Every Topic object contain Topic elements in fieldList if type is "RECORD". so that I have created topicFieldsTable.html fragment for recursion
<table th:fragment="topicFieldsTable(topic)" class="table table-bordered table-striped">
<thead class="thead-dark">
<tr>
<th scope="col" th:text="${topic.className}"></th>
<th scope="col">Type</th>
<th scope="col">Value</th>
</tr>
</thead>
<tbody>
<tr th:each="field, itemStat : ${topic.fieldList}">
<td>
<!--field.name-->
<label th:text="${field.name}">Name</label>
</td>
<td>
<!--field.type-->
<label th:text="${field.type}">Type</label>
</td>
<td th:if="${field.isEnum()}">
<select class="form-control form-control-lg">
<option th:each="eval : ${field.enumValues}"
th:value="${eval}"
th:text="${eval}">Value</option>
</select>
</td>
<td th:if="${field.isRecord()}">
<div th:replace="fragments/topicFieldsTable :: topicFieldsTable(topic=${field})"></div>
</td>
<td th:if="${field.isPrimitive()}">
<!--field.value-->
<input name="value" th:name="${field.name}" th:value="${field.value}" class="form-control form-control-lg"/>
</td>
</tr>
</tbody>
</table>
Additionally I couldn't assign fields with th:field in fragment.
Do you have any idea?
I am creating java web application. For display data in table i am using datatable plugin. Here is my function which send post to servlet and get json data. When i check returned json i see everything okay but i can not display this data in my datatable.
What is json return:
{"data":[{"id":32,"fullName":"Murad Heydarov Cefer","name":"Murad","surname":"Heydarov","middleName":"Cefer","department_name":"Proqramlasdirma","startedToWork":"11/03/2017","note":"must go this week"}]}
$(document).ready(function () {
$('#example').DataTable({
"ajax": {
"url": "../employer/list",
"type": "POST",
"datatype": "json",
"success": function (data) {
console.log(data);
}
},
"columnDefs": [{
"searchable": false,
"orderable": false,
"targets": 0
}],
"order": [[1, 'asc']],
"columns": [
{"data": null},
{"data": "fullName"},
{"data": "name"},
{"data": "surname"},
{"data": "middleName"},
{"data": "department_name"},
{"data": "startedToWork"},
{"data": "note"},
{"data": "id"}
]
});
});
Here is my Servlet:
protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException
{
HttpSession session = request.getSession();
response.setContentType("text/html;charset=UTF-8");
PrintWriter out = response.getWriter();
int worker_id;
String str = (String) session.getAttribute("SID");
SimpleDateFormat tsdf = null;
if (u.module(request).equals("employer"))
{
Gson gson = new Gson();
JsonObject jsonObject = new JsonObject();
switch (u.view(request))
{
case "list":
JsonElement workerListJson = gson.toJsonTree(workerAction.Connect());
jsonObject.add("data", workerListJson);
out.println(jsonObject.toString());
break;
}
}
}
Jsp file:
<table id="example" class="ui celled table" cellspacing="0" width="100%">
<thead>
<tr>
<th>#</th>
<th>full name</th>
<th>department name</th>
<th>started to work</th>
<th>days remain</th>
<th>period</th>
<th>times</th>
<th>note</th>
<th>action</th>
</tr>
</thead>
<tfoot>
<tr>
<th>#</th>
<th>full name</th>
<th>department name</th>
<th>started to work</th>
<th>days remain</th>
<th>period</th>
<th>times</th>
<th>note</th>
<th>action</th>
</tr>
</tfoot>
I want to populate my JQuery table with JSON object which is return by Spring MVC.
My JSON Data formate is
{
availDate: 1421508979000
custName: "Navin"
custMobile: "8765432468"
custEmail: "abc#gmail.com"
custAddress: "BAngalore"
}
My service url for fetching Data is
http://localhost:8080/HomeServiceProvider/booking/getAllBookingDetails
But My code is not working, please check it..
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="http://cdn.datatables.net/1.10.4/js/jquery.dataTables.min.js"> </script>
<link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.4/css/jquery.dataTables.css">
<script>
$(document).ready(function() {
$('#example').dataTable( {
"bProcessing": true,
"bServerSide": true,
"sAjaxSource": "http://localhost:8080/HomeServiceProvider/booking/getAllBookingDetails" // for you it will be - /getWidgetsByType
} );
} );
</script>
</head>
<body>
<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>availDate</th>
<th>custName</th>
<th>Office</th>
<th>custMobile</th>
<th>custAddress</th>
</tr>
</thead>
</table>
</body>
</html>
Add the column names and their respective data (JSON key values) in your data table:
"columns" : [ {
"mData" : "availDate",
"bSortable" : true
}, {
"mData" : "custName",
"bSortable" : true
}, {
"mData" : "custMobile",
"bSortable" : true
}, {
"mData" : "custEmail",
"bSortable" : true
}, {
"mData" : "custAddress",
"bVisible" : false
}]
Check for the data table API for column usage.
Below is my code attempt to post an Json serialize object (java pojo having list of other pojos) with JQuery Ajax call to Spring MVC controller.
Getting Bad request error from server.
When the modalForm data is removed from the Json object the MainPojo data received correctly at server side.
Html Code
Fisrt form
-------------
<form id="mainForm">
.....
</form>
Form in the modal
-----------------
<form id="modelform" ..>
<div id="row">
<input type="text" id="subject" />
<input type="text" id="max" />
<input type="text" id="min" />
</div>
<div id="row">
<input type="text" id="subject" />
<input type="text" id="max" />
<input type="text" id="min" />
</div>
.............
</form>}
Jquery
var mainObject = $('#mainForm').serializeObject();
var modelObject = $('#modelform').serializeObject();
mainObject.marks = modelObject;
Json ( Expected)
{
"name": "Some Name",
"age": "10",
"marks": [
{
"subject": "maths",
"max": "20",
"min":"12"
},
{
"subject": "english",
"max": "20",
"min":"12",
}
]
}
Json (actual output with the above code)
{
"name": "Some Name",
"age": "10",
"marks": [
{
"subject": "maths",
"subject": "english"
},
{
"max": "20",
"max":"20",
},
{
"min": "12",
"min":"12"
}
]
}
//Ajax call
$.ajax({
url: '/save',
type: 'POST',
contentType: 'application/json',
mimeType: 'application/json',
data : JSON.stringify(mainObject),
dataType: 'json',
success: function(data) {
alert(data.msg);
},
error:function (xhr, ajaxOptions, thrownError) {
alert('Technical error occured');
}
});
Java Pojo's
public class MainPojo {
private String name;
private String age;
private Lists<marks>
..................
}
public class ModelPojo {
private String subject;
private String maxMarks;
private String minMarks;
.....................
}
Controller Method
#RequestMapping(value = "save", headers = "Accept=application/json",
method = RequestMethod.POST)
public #ResponseBody String save(#RequestBody final MainPojo mainPojo) {
}
Please help me to identify the problem.
Thank You.
Modify html text like this
<form id="mainForm">
<input name="name" type="text" value="Some Name">
<input name="age" type="text" value="20">
</form>
<form class="modelform">
<input type="text" value="subject" name="subject"/>
<input type="text" value="max" name="max"/>
<input type="text" value="min" name="min"/>
</form>
<form class="modelform">
<input type="text" value="subject" name="subject" />
<input type="text" value="max" name="max"/>
<input type="text" value="min" name="min"/>
</form>
Then write javascript code to assign object value
<script>
var mainObject = $('#mainForm').serializeObject();
var modelObject = [];
$('.modelform').each(function(o){
modelObject.push($(this).serializeObject());
})
mainObject.marks = modelObject;
</script>
i have
#RequestMapping(value = "/save", method = RequestMethod.POST)
public #ResponseBody
MyEvent saveOrganization(#RequestBody Organization organization) {
return new MyEvent('save',organization);
}
y your mvc-servlets.xml
<context:component-scan base-package="com.jrey.project.controllers" />
<context:annotation-config></context:annotation-config>
<mvc:annotation-driven>
<mvc:message-converters>
<bean
class="org.springframework.http.converter.json.MappingJackson2HttpMessageConverter">
</bean>
</mvc:message-converters>
</mvc:annotation-driven>
my jquery post
$.fn.serializeObject = function() {
var o = {};
var a = this.serializeArray();
$.each(a, function() {
if (o[this.name] !== undefined) {
if (!o[this.name].push) {
o[this.name] = [ o[this.name] ];
}
o[this.name].push(this.value || '');
} else {
o[this.name] = this.value || '';
}
});
return o;
};
<script>
$(document)
.ready(
function() {
$('.submit', '#form')
.click(
function() {
var data = JSON
.stringify($('#form')
.serializeObject());
console.log(data);
$
.ajax({
type : "POST",
url : '${pageContext.request.contextPath}/controller/organization',
data : data,
dataType : 'json',
contentType : 'application/json;charset=UTF-8',
success : function(data) {
$(
'<div>'
+ data.message
+ '</div>')
.dialog(
{
title : 'Organizacion',
modal : true,
buttons : {
'Aceptar' : function() {
document.location.href = data.location;
}
}
}
);
},
});
});
});