JQuery DataTables does not display Unicode characters

Question

JQuery DataTables does not display Unicode characters

I am using jQuery DataTables to display pagination data from a MySQL database.

When I show normal characters in this table, it shows the correct data in the table. But while retaining Unicode characters, does it only display characters ? .

Below are my html codes for this page:

 <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@ taglib prefix="form" uri="http://www.springframework.org/tags/form"%> <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Township</title> <link rel="stylesheet" href="<c:url value="/resources/styles/township.css" />"/> <link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.0/css/jquery.dataTables.css"> <script type="text/javascript" charset = "utf8" src="//code.jquery.com/jquery-1.10.2.min.js"></script> <script type="text/javascript" charset = "utf8" src="//cdn.datatables.net/1.10.0/js/jquery.dataTables.js"></script> <script type="text/javascript" charset = "utf8" > //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() { $("#example").dataTable( { "bProcessing": true, "bServerSide": true, "sort": "position", "bStateSave": false, "iDisplayLength": 10, "iDisplayStart": 0, "fnDrawCallback": function () { }, "sAjaxSource": "springPaginationDataTables.web", "aoColumns": [ { "mData": "townshipCode" }, { "mData": "townshipName" }, { "mData": "divisionName" }, { "mData": "actionlink"}, ] } ); } ); </script> </head> <body> <div id="container"> <div id="table"> <form:form action="" method="GET" align="center"> <br> <table style="border: 3px;background: rgb(243, 244, 248); width: 90%; margin:20px auto;"><tr><td> <table id="example" class="display"> <thead> <tr> <th>Code</th> <th>Township</th> <th>Division</th> <th>Action</th> </tr> </thead> </table> </td></tr></table> <br> </form:form> </div> </div> </body> </html>

My internal Java code for this table is:

 @RequestMapping(value = "/springPaginationDataTables.web", method = RequestMethod.GET, produces = "application/json") public @ResponseBody String springPaginationDataTables(HttpServletRequest request) throws IOException { Integer pageNumber = 0; if (null != request.getParameter("iDisplayStart")) pageNumber = (Integer.valueOf(request.getParameter("iDisplayStart"))/10)+1; Integer pageDisplayLength = Integer.valueOf(request.getParameter("iDisplayLength")); List<Township> listTownship = townshipDao.getList(pageNumber, pageDisplayLength); int count = townshipDao.getCount(); JsonObject<Township> townshipJsonObject = new JsonObject<Township>(); //Set Total display record townshipJsonObject.setiTotalDisplayRecords(count); //Set Total record townshipJsonObject.setiTotalRecords(count); townshipJsonObject.setAaData(listTownship); Gson gson = new GsonBuilder().setPrettyPrinting().create(); String json2 = gson.toJson(townshipJsonObject); return json2; }

I got the following result in a data table that shows ? instead of Unicode characters:

enter image description here

Please help me solve this problem.

+1

java jquery html ajax

Thiha Zaw Apr 25 '15 at 12:18

source share

1 answer

user106168 · Answer 1 · 2016-03-31 10:06

Try to force the encoding in the create attribute as follows:

@RequestMapping (value = "/springPaginationDataTables.web", method = RequestMethod.GET, produces = "application / json; charset = UTF-8")

JQuery DataTables does not display Unicode characters

More articles: