JQuery Data Table Server Side Processing Failed
JQuery Data Table Server Side Processing Failed
peterwkc
Posts: 21Questions: 0Answers: 0
Hello to all, I'm using the JQuery Data Table but it failed to load the data into the data table.
JSP
[code]
$(document).ready(function(){
$.ajaxSetup({cache : false});
var oTable = $("#gmReportTbl").dataTable({
-bServerData : true,
-bServerSide : true,
-bJQueryUI : true,
sServerMethod : "POST",
-sAjaxSource : "${context}/analytics/generateGM_json",
"aoColumns":
[
{"bSortable" : false},
{"bSortable" : false},
{"bSortable" : false},
{"bSortable" : false},
{"bSortable" : false},
{"bSortable" : false},
{"bVisible": true, "bSortable" : false}
]
});
});
Destination*
Select Destination
${dest.countryName}
/select>
Generate Report
Reset
Country
Dial Code
Customer Prefix
Vendor Prefix
Customer Price
Vendor Cost
Profit
Loading data from Server
[/code]
Spring MVC:
[code]
@RequestMapping(value = "/gm-report-json", method = RequestMethod.GET)
public String viewGMReport_JSON(ModelMap map) {
List countryList = reportDao.getAllCountry();
map.put("countryList", countryList);
// return view
return "gmReport_json";
}
// form call
@RequestMapping(value = "/generateGM_json", method = RequestMethod.POST)
public @ResponseBody String generateGMReport_JSON(@RequestParam("countryCode") int countryCode, ModelAndView mv) {
JSONArray gmDataArray = new JSONArray();
JSONObject jsonObj = new JSONObject();
List gmList = reportDao.generateGrossMarginReport(countryCode);
for (CostReport cr : gmList) {
JSONArray gmArray = new JSONArray();
gmArray.put(cr.getCountryCode());
gmArray.put(cr.getDialCode());
gmArray.put(cr.getCustPrefix());
gmArray.put(cr.getVendorPrefix());
try {
gmArray.put(cr.getCustPrice());
gmArray.put(cr.getVendorCost());
gmArray.put(cr.getProfit());
} catch (JSONException e) {
}
gmDataArray.put(gmArray);
}
try {
jsonObj.put("sEcho", 0);
jsonObj.put("iTotalDisplayRecords", gmList.size());
jsonObj.put("aaData", gmDataArray);
} catch (JSONException e) {
Logger.getLogger(AnalyticsController.class).log(Priority.ERROR, e.getLocalizedMessage());
}
return jsonObj.toString();
}
[/code]
Please help. Thanks.
Anyone know what is the reason ?
JSON DATA
[quote]
{
"iTotalDisplayRecords": 3,
"aaData": [
[
60,
3,
"12345",
"12345",
0.5,
0.03999999910593033,
0.46000000834465027
],
[
60,
3,
"55555",
"55555",
0.8999999761581421,
0.029999999329447746,
0.8700000047683716
],
[
60,
3,
"12345",
"12345",
0.5,
0.009999999776482582,
0.49000000953674316
]
],
"sEcho": 0
}
[/quote]
I realized that when I load the page, JQuery Data Table will make an Ajax Call to server side. Why is this happen ?
JSP
[code]
$(document).ready(function(){
$.ajaxSetup({cache : false});
var oTable = $("#gmReportTbl").dataTable({
-bServerData : true,
-bServerSide : true,
-bJQueryUI : true,
sServerMethod : "POST",
-sAjaxSource : "${context}/analytics/generateGM_json",
"aoColumns":
[
{"bSortable" : false},
{"bSortable" : false},
{"bSortable" : false},
{"bSortable" : false},
{"bSortable" : false},
{"bSortable" : false},
{"bVisible": true, "bSortable" : false}
]
});
});
Destination*
Select Destination
${dest.countryName}
/select>
Generate Report
Reset
Country
Dial Code
Customer Prefix
Vendor Prefix
Customer Price
Vendor Cost
Profit
Loading data from Server
[/code]
Spring MVC:
[code]
@RequestMapping(value = "/gm-report-json", method = RequestMethod.GET)
public String viewGMReport_JSON(ModelMap map) {
List countryList = reportDao.getAllCountry();
map.put("countryList", countryList);
// return view
return "gmReport_json";
}
// form call
@RequestMapping(value = "/generateGM_json", method = RequestMethod.POST)
public @ResponseBody String generateGMReport_JSON(@RequestParam("countryCode") int countryCode, ModelAndView mv) {
JSONArray gmDataArray = new JSONArray();
JSONObject jsonObj = new JSONObject();
List gmList = reportDao.generateGrossMarginReport(countryCode);
for (CostReport cr : gmList) {
JSONArray gmArray = new JSONArray();
gmArray.put(cr.getCountryCode());
gmArray.put(cr.getDialCode());
gmArray.put(cr.getCustPrefix());
gmArray.put(cr.getVendorPrefix());
try {
gmArray.put(cr.getCustPrice());
gmArray.put(cr.getVendorCost());
gmArray.put(cr.getProfit());
} catch (JSONException e) {
}
gmDataArray.put(gmArray);
}
try {
jsonObj.put("sEcho", 0);
jsonObj.put("iTotalDisplayRecords", gmList.size());
jsonObj.put("aaData", gmDataArray);
} catch (JSONException e) {
Logger.getLogger(AnalyticsController.class).log(Priority.ERROR, e.getLocalizedMessage());
}
return jsonObj.toString();
}
[/code]
Please help. Thanks.
Anyone know what is the reason ?
JSON DATA
[quote]
{
"iTotalDisplayRecords": 3,
"aaData": [
[
60,
3,
"12345",
"12345",
0.5,
0.03999999910593033,
0.46000000834465027
],
[
60,
3,
"55555",
"55555",
0.8999999761581421,
0.029999999329447746,
0.8700000047683716
],
[
60,
3,
"12345",
"12345",
0.5,
0.009999999776482582,
0.49000000953674316
]
],
"sEcho": 0
}
[/quote]
I realized that when I load the page, JQuery Data Table will make an Ajax Call to server side. Why is this happen ?
This discussion has been closed.
Replies
2. Link to a test case: http://datatables.net/forums/discussion/12899/post-test-cases-when-asking-for-help-please-read
Allan
Bit more info:
1. when the page is loaded, the Datatable is loaded and is invisible, and not to hit the server for the data. (Not get data from server but just decorate the data table).
2.Now user clicks a button on the page, that calls a javascript (function/AJAX Call) which in turn have to activate the Datatable to retrieve the data from server side.
3. subsequently Datatable pulls the data from serverside, and all the further user interaction hits the server.
Is this possible?
Mr Allan, Please help. Thanks.
Allan
Besides that, How to intialize JQuery data table when user submit the form ? I don't need sorting right now. I need to implement pagination later on.
Allan
Allan