title: How to pass JSON value from Controller to HTML in Thymeleaf?
body: <p>I try do do "Server side pagination" using DataTables. I was following this tutorial to get it done "<a href="http://javahonk.com/spring-mvc-pagination-datatables/" rel="noreferrer">http://javahonk.com/spring-mvc-pagination-datatables/</a>". It's using JSP as their html language. What i using here is "Thymeleaf"</p>
  
  <p>but when i trying to do that, i stuck at the JSON value is already generated, but it appear in my console and won't show up in my HTML page</p>
  
  <p>Here is my controller :
  SpringMVCController.java</p>
  
  <pre><code>@RequestMapping(value = "/barangs", method = RequestMethod.GET, produces = "application/json")
  public String processFindBarang(HttpServletRequest request) {
  
  //Fetch the page number from client
  Integer pageNumber = 0;
  if (null != request.getParameter("iDisplayStart"))
      pageNumber = (Integer.valueOf(request.getParameter("iDisplayStart"))/10)+1;     
  
  //Fetch search parameter
  String searchParameter = request.getParameter("sSearch");
  
  //Fetch Page display length
  Integer pageDisplayLength = Integer.valueOf(request.getParameter("iDisplayLength"));
  
  //Create page list data
  Collection&lt;ReturOrder&gt; returList = createPaginationData(pageDisplayLength);
  
  ReturObjectJson returJsonObject = new ReturObjectJson();
  //Set Total display record
  returJsonObject.setiTotalDisplayRecords(200);
  //Set Total record
  returJsonObject.setiTotalRecords(200);
  returJsonObject.setAaData(returList);
  
  Gson gson = new GsonBuilder().setPrettyPrinting().create();
  String json2 = gson.toJson(returJsonObject);
  
  return json2;
  </code></pre>
  
  <p>}</p>
  
  <p>it's already return the JSON nicely done, it appear in my "console" area while debuging in my Eclipse IDE</p>
  
  <p>Here is my HTML page. Main.html</p>
  
  <pre><code>&lt;form method="GET"&gt;
  &lt;h2&gt;Spring MVC pagination using data tables&lt;/h2&gt;
  &lt;table width="70%" style="border: 3px;background: rgb(243, 244, 248);"&gt;&lt;tr&gt;&lt;td&gt;
  &lt;table id="tablepage" class="display" cellspacing="0" width="100%"&gt;
          &lt;thead&gt;
              &lt;tr&gt;
                  &lt;th&gt;Nomor_Transaksi&lt;/th&gt;
                  &lt;th&gt;Tgl_Trans&lt;/th&gt;
                  &lt;th&gt;FlagCetak&lt;/th&gt;
                  &lt;th&gt;Kd_Plg&lt;/th&gt;
              &lt;/tr&gt;
          &lt;/thead&gt;   
      &lt;/table&gt;
      &lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>And here is my javascript at  area</p>
  
  <pre><code>&lt;script type="text/javascript" th:inline="javascript"&gt;
  
      //Plug-in to fetch page data
  jQuery.fn.dataTableExt.oApi.fnPagingInfo = function ( oSettings )
  {
  return {
  "iStart":         oSettings._iDisplayStart,
  "iEnd":           oSettings.fnDisplayEnd(),
  "iLength":        oSettings._iDisplayLength,
  "iTotal":         oSettings.fnRecordsTotal(),
  "iFilteredTotal": oSettings.fnRecordsDisplay(),
  "iPage":          oSettings._iDisplayLength === -1 ?
  0 : Math.ceil( oSettings._iDisplayStart / oSettings._iDisplayLength ),
  "iTotalPages":    oSettings._iDisplayLength === -1 ?
  0 : Math.ceil( oSettings.fnRecordsDisplay() / oSettings._iDisplayLength )
  };
  };
  
  $(document).ready(function() {
  
  $("#tablepage").dataTable( {
          "bProcessing": true,
          "bServerSide": true,
          "sort": "position",
          //bStateSave variable you can use to save state on client cookies: set value "true"
          "bStateSave": false,
          //Default: Page display length
          "iDisplayLength": 10,
          //We will use below variable to track page number on server side(For more information visit: http://legacy.datatables.net/usage/options#iDisplayStart)
          "iDisplayStart": 0,
          "fnDrawCallback": function () {
              //Get page numer on client. Please note: number start from 0 So
              //for the first page you will see 0 second page 1 third page 2...
              //Un-comment below alert to see page number
           //alert("Current page number: "+this.fnPagingInfo().iPage);    
          },        
          "sAjaxSource": "barangs",
          "aoColumns": [
              { "mData": "Nomor_Transaksi" },
              { "mData": "Tgl_Trans" },
              { "mData": "FlagCetak" },
              { "mData": "Kd_Plg" },
  
          ]
      } );
  
  } );
  
  &lt;/script&gt;
  </code></pre>
  
  <p>the value won't show up, it give me these error while executing in my web browser. it show up a alert box that said : "<strong>DataTables warning: table id=tablepage - Ajax error. For more information about this error, please see <a href="http://datatables.net/tn/7" rel="noreferrer">http://datatables.net/tn/7</a></strong>"</p>
  
  <p>but when i look into my eclipse console, the JSON value suchs as :</p>
  
  <pre><code>    {
        "Nomor_Transaksi": "xxxxx",
        "Tgl_Trans": "Jan 15, 2014 12:00:00 AM",
        "FlagCetak": "Y",
        "Kd_Plg": "MGS                    "
      },
      {
        "Nomor_Transaksi": "xxxxx",
        "Tgl_Trans": "Jan 6, 2014 12:00:00 AM",
        "FlagCetak": "Y",
        "Kd_Plg": "MGS                    "
      }
    ]
  }", template might not exist or might not be accessible by any of the configured Template Resolvers
  </code></pre>
  
  <p>whan i am missed here?</p>