I am using jQuery DataTables to show pagination data from MySQL database.
When I show normal characters in this table, it shows proper data in table. But, when I save Unicode characters it only shows ? characters.
The following is 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 backend 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 output in Data Table which showing ? instead of Unicode characters:
Please help me to solve this problem.
