title: ajax+json+jquery+datatables+spring mvc
body: <p>I am looking for a way to populate data inside the datatables but the data is not coming out.
  I will show my codes step by step.</p>
  
  <p>This is inside the controller with contains dummies data.</p>
  
  <pre><code>@RequestMapping(value="/claim/prApplication",method=RequestMethod.POST)
  public @ResponseBody DataTablesJsonModel getDataTableSelfClaim(@RequestBody String employeeId){
      HraPrmClaimApplication toShow=new HraPrmClaimApplication();
      toShow.setApplicationId((Integer)1);
      toShow.setDate("2015.01.01");
      toShow.setTotalAmount((double)200);
      toShow.setDocument("sample.pdf");
      toShow.setNote("");
      DataTablesJsonModel toReturn=new DataTablesJsonModel();
      toReturn.setAaData(toShow);
      System.out.print(toReturn);
      return toReturn;
  }
  </code></pre>
  
  <hr>
  
  <p>This is inside my jsp page.</p>
  
  <pre><code>function loadSelfTable(){
              return initSingleSelectDataTable("#selfTable",null,null,"/",true,
              {
                  "sDom": "&lt;'row'&lt;'col-xs-6'i&gt;&lt;'col-xs-6'f&gt;r&gt;t&lt;'row'&lt;'col-xs-6'i&gt;&lt;'col-xs-6'p&gt;&gt;",
                  "sPaginationType": "bootstrap",
                  "bPaginate": false,
                  "bProcessing": true,
                  "sAjaxSource": "${pageContext.request.contextPath}/hra/prm/claim/prApplication",    
                  "fnServerData": function ( sSource, aaData, fnCallback ) {
                      $.ajax( {
                              dataType: 'json',
                              type: "POST", 
                              url:  sSource,
                              success:function(result){
                                  if (result.aaData.code != null &amp;&amp; result.aaData.code != '') {
                                      $('#errorMsgPanel &gt; div &gt; span').text(result.aaData.message);
                                      $('#errorMsgPanel').css("display", "block");
                                      fnCallback({aaData:[]});
                                  }
                                  else {                                                                          
                                      fnCallback(result); 
                                      alert(JSON.stringify(result));
                                  }
                          },
                          error: function(jqXHR, textStatus, errorThrown) {
                              alert('&lt;fmt:message key="ER0996" bundle="${messageBundle}"/&gt;' + " (textStatus: " + textStatus + " errorThrown: " + errorThrown + " jqXHR.status: " + jqXHR.status + ")");
                          }
                      });
                  },
                  "aoColumns":[
                                  {"mDataProp":"applicationId"},
                                  {"mDataProp":"appDate"},
                                  {"mDataProp":"amount"},
                                  {"mDataProp":"status"},
                                  {"mDataProp":"document"},
                                  {"mDataProp":"note"},
                              ],
                  "aaSorting": [],
              });
  
          } 
  
  $(document).ready(function(){
  
                  loadSelfTable();
  
          });
  </code></pre>
  
  <p>My problem is when i alert the result, the data show as a string.
  But the data does not populate inside the table.
  Help me if you have any ideas how to do.</p>