How to pass JSON value from Controller to HTML in Thymeleaf?
Found it! i missed a @ResponseBody tag!
so here is my Controller function
@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;
}
Ke Vin
Updated on June 28, 2022Comments
-
Ke Vin almost 2 years
I try do do "Server side pagination" using DataTables. I was following this tutorial to get it done "http://javahonk.com/spring-mvc-pagination-datatables/". It's using JSP as their html language. What i using here is "Thymeleaf"
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
Here is my controller : 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;
}
it's already return the JSON nicely done, it appear in my "console" area while debuging in my Eclipse IDE
Here is my HTML page. 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>
And here is my javascript at area
<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>
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 : "DataTables warning: table id=tablepage - Ajax error. For more information about this error, please see http://datatables.net/tn/7"
but when i look into my eclipse console, the JSON value suchs as :
{ "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 i am missed here?