Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to pass JSON value from Controller to HTML in Thymeleaf?

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?

like image 337
Ke Vin Avatar asked Mar 25 '15 04:03

Ke Vin


People also ask

How do I read JSon data in Thymeleaf?

The json data got of the api response is generated on client side. One way is use javascript to load the api response data into a html table. Another way can you take is modify the controller that calls to the thymeleaf template to get the JSon value.

How do you display value in Thymeleaf?

The return value of our controller's method should be the name of the desired Thymeleaf template. This name should correspond to the HTML file located in the src/resource/template directory. In our case, it'll be src/resource/template/articles-list. html.


1 Answers

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;
}
like image 188
Ke Vin Avatar answered Nov 14 '22 23:11

Ke Vin