JQuery DataTable + Java

peterwkc

I have using JQuery with Java EE where i set the sAjaxSource is from server but there is Json Data formatting error after data post back from server.

May I know why it is and how to solve it?

Thanks.

cyberwarrior

hello peter,

Maybe you should show your servlet code and the datatables parameters.

++

peterwkc

[code]


This is JQuery dataTable usage in searchTicket.jsp

$(document).ready(function()
{
// The searchBtn ID is not available during javascript loading
// so bind the event to listener after DOM ready
$("#searchBtn").click(function(){

var ticketId = document.getElementById("id");
/* var searchByTicketCheck = document.getElementId("idChkBox"); */

// If id check box checked but id empty then
if (ticketId.value == "") {
//$("#error").html("Please fill in Ticket Id");
// Return to browser
//return false;
}
});

$("#ticketList").dataTable(
{
"bProcessing" : true, // Enable processing indicator
"bServerSide" : true, // Configure data option - server or client
"bSort" : true, // Enable sorting
"bFilter" : true,
"bAutoWidth" : true,
"sPaginationType" : "full_numbers", // Paginate Type -> two_button (Previous && Next)
// -> full_numbers (First, Previous, 1, 2, Next, Last)
"sAjaxSource" : "${context}/app.view?tn=Ticket.SearchTicket",
"bLengthChange" : true,
"iDisplayLength" : 10,
});
});


[/code]

SearchTicket.java

[code]
@Override
public TaskResponse execute(HttpServletRequest request,
HttpServletResponse response) throws WebTaskException {

boolean isPost = false;
String action = null;
HttpSession session = request.getSession();

if (session == null) {
throw new WebTaskException("Unauthorized Access");
}

isPost = "POST".equals(request.getMethod());
if (isPost) {
// Get page number -> Pagination request
// if (request.getParameter("sEcho") != null) {
Integer id = null;
String categoryStr = request.getParameter("category");
String urgencyStr = request.getParameter("urgency");
String statusStr = request.getParameter("status");

int fetchRowSize = Integer.parseInt(request.getParameter("iDisplayLength"));
int currentRow = Integer.parseInt(request.getParameter("iDisplayStart"));

// String currentRowStr = request.getParameter("currentRow"); // -> offset
// String fetchRowStr = request.getParameter("fetchRowSize"); // -> limit

Ticket ticket = new Ticket();
List ticketList = new ArrayList();

if (request.getParameter("id") != null && request.getParameter("id") != "") {
id = Integer.parseInt(request.getParameter("id"));
ticket.setId(id.intValue());
} else {
ticket.setId(-1);
}

if (this.category.get(categoryStr) != null) {
ticket.setCategory(this.category.get(categoryStr).intValue());
} else {
ticket.setCategory(-1);
}

if (this.urgency.get(urgencyStr) != null) {
ticket.setUrgency(this.urgency.get(urgencyStr).intValue());
} else {
ticket.setUrgency(-1);
}

if (this.status.get(statusStr) != null) {
ticket.setStatus(this.status.get(statusStr).intValue());
} else {
ticket.setStatus(-1);
}

ticketList = dao.findTicket(ticket, fetchRowSize, currentRow);

if (ticketList.size() > 0) {
request.setAttribute("ticketList", ticketList);
}

JSONArray array = convertObject(ticketList);
taskResponse.setResponseText(array.toString());
logger.log(Level.INFO, array.toString());

// taskResponse.setResponseType(ResponseType.JSON);

/* MySql Pagination Test */
/*ticketList = dao.getAllTickets(id);
for (Ticket t: ticketList) {
logger.log(Level.INFO, String.valueOf(t.getId()));
}*/

// }
}

logger.log(Level.INFO, "searchTicket called");


//taskResponse.addForwardTask(VBossProperties.getInstance(), "admin.ViewDefinePrivilege");

return taskResponse;
}
[/code]


There is no sEcho, iDisplayLength and iDisplayStart number post to the Java Servlet.
Besides this, whenever i set the response type to application/JSON, it appears a download dialog. Why there is download dialog when i set the response type to JSON in Java.

Please help.

arjun_adhikari

hello peterwkc,
please refer the following, it helped me quite a lot in understanding datatables with servlet, hope it helps you the same.

https://sites.google.com/site/cargoarea/devel/Datatables_AJAX_With_Oracle.war


Arjun

peterwkc

I had check the this website but could not find anything relate to my question. http://www.codeproject.com/Articles/359750/jQuery-DataTables-in-Java-Web-Applications

Please help.

peterwkc

There is no XHR (XMLHttpRequest) to server. Therefore, no sEcho, iDisplayLength and iDisplayStart attribute when Java Servlet. How to make an ajax call or any better approach?

peterwkc

I want to implement clicking the search button, first, previous and next will sending a XHR to server. Any thing i had done wrongly?

peterwkc

The default behaviour of data table is send the XHR request only when doing When using server-side processing, DataTables will make an XHR request to the server for each draw of the information on the page (i.e. when paging, sorting, filtering etc) but I want to do send a XHR request to servlet if user clicks a button.

peterwkc

Why there are two requests to servlet? One is with Form POST and another one is probably is XHR.

peterwkc

I receive an error from JQuery parsing JSON string which is DataTables warning: JSON data from server could not be parsed. This is caused by a JSON formatting error.

How to solve this error?

My return Json string is like this:

[code]
{"iTotalDisplayRecords":9,"iTotalRecords":345,
"aaData":[
{"id":["0"],"category":["0"],"status":["0"],"action":[""],"assignee":["peter"],"urgency":["0"]},
{"id":["1"],"category":["0"],"status":["0"],"action":[""],"assignee":["peter"],"urgency":["0"]},
{"id":["2"],"category":["0"],"status":["0"],"action":[""],"assignee":["peter"],"urgency":["0"]},
{"id":["3"],"category":["0"],"status":["0"],"action":[""],"assignee":["peter"],"urgency":["0"]},
{"id":["4"],"category":["0"],"status":["0"],"action":[""],"assignee":["peter"],"urgency":["0"]},
{"id":["5"],"category":["0"],"status":["0"],"action":[""],"assignee":["peter"],"urgency":["0"]},
{"id":["6"],"category":["0"],"status":["0"],"action":[""],"assignee":["peter"],"urgency":["0"]},
{"id":["7"],"category":["0"],"status":["0"],"action":[""],"assignee":["peter"],"urgency":["0"]},
{"id":["8"],"category":["0"],"status":["0"],"action":[""],"assignee":["peter"],"urgency":["0"]},
{"id":["9"],"category":["0"],"status":["0"],"action":[""],"assignee":["peter"],"urgency":["0"]}],
"sEcho":"1"}
[/code]