JQuery Data Table Server Side Processing Failed

Hello to all, I'm using the JQuery Data Table but it failed to load the data into the data table.


JSP

$(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}			
				
			]
	});
});



<form id="gmForm" class="cmxform" action="${context}/analytics/generateGM_json" method="POST">
   <div id="formParmsVertical" style="margin-left: 150px">
	<div class="field" style="margin-left: 100px">
		<label>Destination<span class="red-asterisk">*</span></label>
		<select id="countryCode" name="countryCode" class="required" title="Please select a destination">
			<option disabled="disabled" value="" selected="selected">Select Destination</option>
			<c:forEach var="dest" items="${countryList}">
				<option value="${dest.countryCode}">${dest.countryName}</option>
			</c:forEach>
		/select>
	</div>
    </div>
					
    <div id="buttons" style="margin: 20px 430px 0px 0px;">
    <button id="submitBtn" type="submit">Generate Report</button>
     <button id="resetBtn" type="reset">Reset</button>
  </div>
				
</form>


<table id="gmReportTbl">
	<thead>
		<tr>
			<th style="text-align:center"><b>Country</b></th>
			<th style="text-align:center"><b>Dial Code</b></th>
			<th style="text-align:center"><b>Customer Prefix</b></th>
			<th style="text-align:center"><b>Vendor Prefix</b></th>
			<th style="text-align:center"><b>Customer Price</b></th>
			<th style="text-align:center"><b>Vendor Cost</b></th>
			<th style="text-align:center"><b>Profit</b></th>
		</tr>
	</thead>

	<tbody>
		<tr>
			<td colspan="7" >Loading data from Server</td>
		</tr>
	</tbody>

</table>

Spring MVC:

@RequestMapping(value = "/gm-report-json", method = RequestMethod.GET)
public String viewGMReport_JSON(ModelMap map) {	
	List<Country> 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<CostReport> 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();
}

Please help. Thanks.


Anyone know what is the reason ?

JSON DATA

{
"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
}

I realized that when I load the page, JQuery Data Table will make an Ajax Call to server side. Why is this happen ?