can populate a JQuery table via AJAX and using JAVA-JSP.
There will be four steps to achieve this.
1- Calling the JSP. This is the first JSP where you will make
the AJAX call to the JSP on the server. This is also where
the results of the AJAX call will be displayed in a data table
with the id "example." Please note the references to the
jquery javascript files and style css files.
Originally this example belongs to the official JQuery site
but it works with a php server there.
serverSideJQdtARS.jsp
---------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link rel="shortcut icon" type="image/ico" href="DataTables-1.7.5/media/images/favicon.ico" />
<title>DataTables example</title>
<style type="text/css" title="currentStyle">
@import "DataTables-1.7.5/media/css/demo_page.css";
@import "DataTables-1.7.5/media/css/demo_table.css";
</style>
<script type="text/javascript" language="javascript" src="DataTables-1.7.5/media/js/jquery.js"></script>
<script type="text/javascript" language="javascript" src="DataTables-1.7.5/media/js/jquery.dataTables.js"></script>
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
$('#example').dataTable( {
"bProcessing": true,
"bServerSide": true,
"sAjaxSource": "./server_processingARS3.jsp"
} );
} );
</script>
</head>
<body id="dt_example">
<div id="container">
<div class="full_width big">
<i>DataTables</i> server-side processing example
</div>
<H1>Live example</H1>
<DIV id=dynamic>
<TABLE id=example class=display border=0 cellSpacing=0 cellPadding=0>
<THEAD>
<TR>
<TH width="20%">Rendering engine</TH>
<TH width="25%">Browser</TH>
<TH width="25%">Platform(s)</TH>
<TH width="15%">Engine version</TH>
<TH width="15%">CSS grade</TH></TR></THEAD>
<TBODY>
<TR>
<TD class=dataTables_empty colSpan=5>Loading data from server
</TD>
</TR>
</TBODY>
</TABLE>
</DIV>
</div>
</body>
</html>
The JSP file on the server is below. The purpose here is only if it has been called.
You may check the print out at the server log. So it works at least.
server_processingARS.jsp
------------------------
<%--
Document : server_processingARS.jsp
Created on : 04.?ub.2011, 17:53:53
Author : Ali Riza SARAL
--%>
<%@page import="java.util.Vector"%>
<%
System.out.println( "test arsssssssssssssssssssssss" );
%>
Of course it will give some error like:
"Data Tables warning: JSON data from server could not be parsed.
This is caused by a JSON formatting error."
2- Next, I tried to create a JSON array which fits the requirements
of JQuery. I changed the JSP on the server as:
server_processingARS2.jsp
-------------------------
<%--
Document : server_processingARS.jsp
Created on : 04.?ub.2011, 17:53:53
Author : Ali Riza SARAL
--%>
<%@page import="atg.taglib.json.util.*"%>
<%
System.out.println("test arsssssssssssssssssssssss");
CDL cdl = new CDL();
JSONArray jsonarray = new JSONArray();
try {
JSONObject jsObj = new JSONObject();
jsObj = jsObj.put("sEcho", 1);
jsonarray.add(jsObj);
jsObj = new JSONObject();
jsObj = jsObj.put("iTotalRecords", 1);
jsonarray.add(jsObj);
jsObj = new JSONObject();
jsObj = jsObj.put("iTotalDisplayRecords", 1);
jsonarray.add(jsObj);
JSONObject jsObjEngine = new JSONObject();
jsObjEngine = jsObjEngine.put("Engine","Trident");
JSONObject jsObjBrowser = new JSONObject();
jsObjBrowser = jsObjBrowser.put("Browser", "Internet Explorer 4.0");
JSONObject jsObjPlatform = new JSONObject();
jsObjPlatform = jsObjPlatform.put("Platform", "Win 95+");
JSONObject jsObjVersion = new JSONObject();
jsObjVersion = jsObjVersion.put("Version", "4");
JSONObject jsObjGrade = new JSONObject();
jsObjGrade = jsObjGrade.put("Grade", "X");
JSONArray jsArraaData = new JSONArray();
jsArraaData.add(jsObjEngine );
jsArraaData.add(jsObjBrowser );
jsArraaData.add(jsObjPlatform );
jsArraaData.add(jsObjVersion );
jsArraaData.add(jsObjGrade );
JSONObject jsObjaaData = new JSONObject();
jsObjaaData = jsObjaaData.put("aaData", jsArraaData);
jsonarray.add(jsObjaaData);
out.print(jsonarray);
//String y = jsonarray.toString();
//System.out.println(y);
} catch (JSONException je) {
System.out.println(je.toString());
}
%>
I played around but I could not pass over this hurdle:
"aaData.length is null or not an object"
3- I looked around and found a small note from ALLAN on the
JQuery official board. It said you can have a look at
.../datatables/examples/example_support/json_sources2.txt
I tried his suggestion with the below code:
server_processing3.jsp
----------------------
<%--
Document : server_processingARS.jsp
Created on : 04.?ub.2011, 17:53:53
Author : Ali Riza SARAL
--%>
<%@page import="atg.taglib.json.util.*"%>
<%
System.out.println("test arsssssssssssssssssssssss");
try {
String x =
"{ \"aaData\": ["+
" [ \"ALLAN\", \"Internet Explorer 4.0\", \"Win 95+\", 4, \"X\" ],"+
" [ \"Trident\", \"Internet Explorer 5.0\", \"Win 95+\", 5, \"C\" ]"+
"] }";
out.print(x);
}
catch (Error e){System.out.println("errorrrrrrr");}
%>
It worked.
4- Now the problem was to produce the same JSON code programmatically,
using the lib ofJSON.org. The solution is:
server_processing4.jsp
----------------------
<%--
Document : server_processingARS.jsp
Created on : 04.?ub.2011, 17:53:53
Author : Ali Riza SARAL
--%>
<%@page import="atg.taglib.json.util.*"%>
<%
System.out.println("test arsssssssssssssssssssssss");
try {
String x =
"{ \"aaData\": ["+
" [ \"ALLAN\", \"Internet Explorer 4.0\", \"Win 95+\", 4, \"X\" ],"+
" [ \"Trident\", \"Internet Explorer 5.0\", \"Win 95+\", 5, \"C\" ]"+
"] }";
//out.print(x);
//out.print("<br />");
JSONArray jsaaData = new JSONArray();
Object a[] = {"ALLAN", "Internet Explorer 4.0", "Win 95+",(int) 4, "X"};
JSONArray jsaaData1 = new JSONArray(a);
Object b[] = {"Trident", "Internet Explorer 5.0", "Win 95+",(int) 5, "C"};
JSONArray jsaaData2 = new JSONArray(b);
jsaaData.add(jsaaData1);
jsaaData.add(jsaaData2);
JSONObject jsObj = new JSONObject();
jsObj = jsObj.put("aaData", jsaaData);
String y = jsObj.toString();
out.print(y);
} catch (JSONException je) {
System.out.println(je.toString());
}
%>
I tried to keep JQuery and ALLAN's references alive but if any
offense I will happily correct any discrepancies.
Kind regards.
