I have some problems with showing in my web app the json response in form of html table.
I'm using Spring boot, Bootstrap, JSP for view and jQuery DataTable for showing data in form of table.
The data process is correct: I have a navbar, so I click on this, show a form to query a db, select parameters and click on "Search". After this, in the right div of the main page (we dont' want to change the page but simply reload div of the home page) i can correctly see the header table (hidden before clicking on Search button) and if I click ctrl+shift+k on Firefox and see in Network i can get a 200 status; furthermore, if I click on the event and check the Response label, i can correctly see the data in json format, but i can't see on the page the data. So, i think that my error is in my use of Datatable.
This is the jsp where i must show data response:
<%@ 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" %>
<script type="text/javascript" class="init">
$(document).ready(function() {
$('#firewalldata').DataTable(
{
"ajax": '../getfirewall.json',
"columns":
[
{ "data": "id" },
{ "data": "ip" },
{ "data": "info" },
{ "data": "name" }
]
} );
} );
</script>
<div class="container" align="center">
<h1>Firewall List</h1>
<table class = "table table-bordered" id="firewalldata">
<thead>
<tr>
<th>ID</th>
<th>IP</th>
<th>INFO</th>
<th>Name</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
And this is the controller's method:
@PostMapping(value="/getfirewall.json")
@ResponseBody
public ModelAndView listFirewall(ModelAndView model, HttpServletRequest request,
@RequestParam(name="id", required=false) String id,
@RequestParam(name="info", required=false) String info,
@RequestParam(name="ip", required=false) String ip,
@RequestParam(name="firewallname", required=false) String name) throws IOException
{
//First, we compile the list to shown result
List<Firewall> listFirewall = firewalls.getFirewall(id, info, ip, name);
//Second, we put this list in the model and set the name of the view
model.addObject("listFirewall", listFirewall);
//Finally, we return the model
return model;
}
How you can see, the controller simply call a method defined in DAO class to get a list of Firewall from DB with their data.
What am I doing wrong?
EDIT: as asked, this is a fragment of the Json response that i can see on firefox after clicking ctrl+shifr+k:
Edit2: the script, after the answer below, is now this:
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://cdn.datatables.net/1.10.4/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.4/css/jquery.dataTables.min.css">
<script type="text/javascript" class="init">
$(document).ready(function() {
$('#firewalldata').DataTable(
{
"processing": true,
"ajax":{
"url": "../getfirewall.jsp",
dataSrc: ''
},
"columns": [
{ "data": "id" },
{ "data": "ip" },
{ "data": "info" },
{ "data": "name" }
]
} );
} );
</script>
Now, when i start my app i got this message: DataTables warning: table id=firewalldata - Ajax error. For more information about this error, please see http://datatables.net/tn/7
and when i inspect, i take a 404 error on /getfirewall.jsp; then, when i try to use the search form, i can see only 1 row, with "Loading" and "Showing 0 to 0 of 0 entries".
Edit3: i'm continuing to correct this issue. The problem persist but i have new about analysis: cause i got the 4o4 error on /getfirewall.json, I've tried to digit in my bar and i've got a blank page; if I analyze it, i can se that the body is emppty. But, if i come back to the main page, after form submitting i have, in response section, the data well formed in Json format.
What i don't understand are 2 things:
1) why the page /getfirewall.json is empty, with no data but if I submit the form in the application page i can get the json response?
2) I got the error when i open the browser, after start application, and i got the error. But why? If i must take the data AFTER the form submit, why my app search them immediately?
Edit 4, 19/05/2017
Ok, after oter review, this is my actual code:
<script type="text/javascript" class="init">
$(document).ready(function() {
$('#firewalldata').dataTable(
{
"processing": true,
"serverSide": true,
"ajax":{
url: "../getfirewall.json",
type: "post",
dataSrc: ""
},
"columns": [
{ "data": "id" },
{ "data": "ip" },
{ "data": "info" },
{ "data": "name" }
]
} );
} );
</script>
With the post row I can resolve the 404 problem; I added the processing row because without it i got a "No data found" error.
Actually the code is not yet perfect; i got, after submitting search, a "no matching found error".
FINAL edit.
I solved this question after speaking with some colleagues. the problem is that the "standard" syntax was not enough to model my page, mainly for the redirection on the same page uploading the div. I put here the code, hope may help others programmers with my same issue.
First of all, i added to controler some component that i see in the Json response on the jquery Datatable page: recordsTotal and recordsFiltered. So my code became:
@PostMapping(value="/getfirewall.json")
@ResponseBody
public ModelAndView listFirewall(ModelAndView model, HttpServletRequest request,
@RequestParam(name="id", required=false) String id,
@RequestParam(name="info", required=false) String info,
@RequestParam(name="ip", required=false) String ip,
@RequestParam(name="firewallname", required=false) String name) throws IOException
{
//First, we compile the list to shown result
List<Firewall> listFirewall = firewalls.getFirewall(id, info, ip, name);
//Second, we put this list in the model and set properties for jquery datatables
model.addObject("recordsTotal", listFirewall.size());
model.addObject("recordsFiltered", listFirewall.size());
model.addObject("data", listFirewall);
//Finally, we return the model
return model;
}
Then, i add in the homepage (i remember that i must update home page divs and NOT load results in a new page), this script to serialize the jJson response:
(function($){
$.fn.serializeObject = function()
{
var o = {};
var a = this.serializeArray();
$.each(a, function() {
if (o[this.name]) {
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;
};
})(jQuery);
Finally, i add the extend element in the firewall.jsp page, to model the Json obtained from Jackson; so, the script became this:
<script type="text/javascript" class="init">
var DTfirewall = false;
$(document).ready(function() {
DTfirewall = $('#firewalldata').DataTable(
{
"serverSide": true,
"ajax":{
url: "../getfirewall.json",
type: "post",
"data": function ( d ) {
d = $.extend(d, {
firewallname : $('#firewallname').val()
});
}
},
"columns": [
{ "data": "id" },
{ "data": "ip" },
{ "data": "info" },
{ "data": "name" }
]
} );
} );
</script>
