如何在Thymeleaf中將Controller的JSON值傳遞給HTML？

我嘗試使用DataTable做「服務器端分頁」。我正在按照本教程完成「http://javahonk.com/spring-mvc-pagination-datatables/」。它使用JSP作爲他們的html語言。我在這裏使用的是「Thymeleaf」如何在Thymeleaf中將Controller的JSON值傳遞給HTML？

但是當我試圖做到這一點，我被困在已經產生的JSON值，但它出現在我的控制檯，並在我的HTML頁面將不會出現

這裏是我的控制器： SpringMVCController.java

@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<ReturOrder> 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;

}

它已經返回JSON很好做，它出現在我的「控制檯」區域，而在我的Eclipse IDE調試運行

這是我的HTML頁面。 main.html中

<form method="GET"> 
<h2>Spring MVC pagination using data tables</h2> 
<table width="70%" style="border: 3px;background: rgb(243, 244, 248);"><tr><td> 
<table id="tablepage" class="display" cellspacing="0" width="100%"> 
     <thead> 
      <tr> 
       <th>Nomor_Transaksi</th> 
       <th>Tgl_Trans</th> 
       <th>FlagCetak</th> 
       <th>Kd_Plg</th> 
      </tr> 
     </thead> 
    </table> 
    </td></tr></table> 
</form>

這裏是我區

<script type="text/javascript" th:inline="javascript"> 

    //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" }, 

     ] 
    }); 

}); 

</script>

JavaScript中的值不會顯示出來，它給我的這些錯誤，而在我的web瀏覽器中執行。它顯示了一個警告框，說：「數據表警告：表ID = tablepage - 阿賈克斯錯誤有關此錯誤的詳細信息，請參閱http://datatables.net/tn/7」

但是當我看着我的Eclipse控制檯中，JSON值例如：

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

whan我錯過了嗎？

來源

2015-03-25 Ke Vin

找到了！我錯過了@ResponseBody標籤！

所以這裏是我的控制器功能

@RequestMapping(value = "/barangs", method = RequestMethod.GET, produces = "application/json") 
public @ResponseBody String processFindBarang(HttpServletRequest request) { 

//Fetch Page display length 
Integer pageDisplayLength = Integer.valueOf(request.getParameter("iDisplayLength")); 

//Fetch the page number from client 
Integer pageNumber = 0; 
if (null != request.getParameter("iDisplayStart")) 
    pageNumber = (Integer.valueOf(request.getParameter("iDisplayStart"))/pageDisplayLength)+1;  

/* //Fetch search parameter 
    String searchParameter = request.getParameter("sSearch");*/ 

//Create page list data 
List<ReturOrder> returList = createPaginationData(pageDisplayLength, pageNumber); 

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; 
}

來源

2015-03-25 09:39:54

如何在Thymeleaf中將Controller的JSON值傳遞給HTML？

回答

相關問題