Example of using Mustache with Datatables to change column header languages
Example of using Mustache with Datatables to change column header languages
Dirk Fincley
Posts: 38Questions: 3Answers: 0
This example was created as a result of a question on the forum by another forum member (James Morton) who was looking for an example of mustache with datatables/editor. Well, here it is.
Mustache and jsquery need first to be loaded - hence first two scripts. Then there is a "reRender" routine which will read in the "template html" which is basically the rest of the html including the datatables libraries etc.
Mustache then searches through the template html replacing any string within curly braces which it also finds an entry for inside the data object (name, age, address and price here) with the corresponding translation in the same object.
There is a select drop down which enables the user to switch between the languages. Note that some languages need specific fonts (especially Nordic one like Swedish, Norwegian and even Danish).
Note this example only translates the column names. Mustache can also translate field names (tip: if you define your field names with curly braces around them this will help. You need to process your json file too by Mustache but I have not done that here.
<!doctype html>
<html>
<head>
<script type="text/javascript" src="js/jquery-2.2.0.js" ></script>
<script type="text/javascript" src="mustache/mustache.js" ></script>
<script type="text/javascript">
function reRender() {
var template, data, html;
template = $('#template').val();
eval( $('#data').val() );
html = Mustache.render( template, data );
$('#html').text( html );
$('#result').html( html );
}
</script>
</head>
<body class="dataTables" onload="reRender()" >
<div class="result">
<div id="result">
</div>
</div>
<!----------------------------------- start of Mustache HTML template ----------------------------------------------->
<div class="template" style="display: none;">
<textarea id="template">
<!doctype html>
<html>
<head>
<title>Mustache Datatables example to change column header language</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/s/dt/jqc-1.12.0,moment-2.11.2,dt-1.10.11,b-1.1.2,se-1.1.2/datatables.min.css">
<link rel="stylesheet" type="text/css" href="css/generator-base.css">
<link rel="stylesheet" type="text/css" href="css/editor.dataTables.min.css">
<script type="text/javascript" charset="utf-8" src="https://cdn.datatables.net/s/dt/jqc-1.12.0,moment-2.11.2,dt-1.10.11,b-1.1.2,se-1.1.2/datatables.min.js"></script>
<script type="text/javascript" charset="utf-8" src="js/dataTables.editor.min.js"></script>
<script type="text/javascript" charset="utf-8" src="js/table.mustacheexample.js"></script>
<script >
/* Mustache Language template to facilitate switching of languages */
var data= {
"name": "Name",
"age" : "Age",
"address" : "Address",
"price" : "Price"
};
var dataen = {
"name": "Name",
"age" : "Age",
"address" : "Address",
"price" : "Price"
};
var dataes = {
"name": "Nombre",
"age" : "Edad",
"address" : "Direccion",
"price" : "Precio"
};
var datafr = {
"name": "Nom",
"age" : "Age",
"address" : "Addresse",
"price" : "Pris"
};
var datade = {
"name": "Name",
"age" : "Alter",
"address" : "Addresse",
"price" : "Preis"
};
var datadk = {
"name": "Name",
"age" : "Alder",
"address" : "Adresse",
"price" : "Pris"
};
</script>
<script type="text/javascript">
function changeLang() {
switch (document.getElementById("lang").value) {
case "de":
var data = datade;
console.log("German: "+JSON.stringify(data));
break;
case "dk":
var data = datadk;
console.log("Danish: "+JSON.stringify(data));
break;
case "en":
var data = dataen;
console.log("English: "+JSON.stringify(data));
break;
case "es":
var data = dataes;
console.log("Spanish: "+JSON.stringify(data));
break;
case "fr":
var data = datafr;
console.log("French: "+JSON.stringify(data));
break;
}
var template, data, html;
template = $('#template').val();
html = Mustache.render( template, data );
$('#html').text( html );
$('#result').html( html );
}
</script>
<script type="text/javascript">
function reRender() {
var template, data, html;
template = $('#template').val();
html = Mustache.render( template, data );
$('#html').text( html );
$('#result').html( html );
}
</script>
</head>
<body class="dataTables" onload="changeLang()" >
<select id="lang" onchange="changeLang()">
<option value='xx' "selected">Choose language</option>
<option value="dk">Danish</option>
<option value="en">English</option>
<option value="fr">French</option>
<option value="de">German</option>
<option value="es">Spanish</option>
</select>
<h1>Mustache Datatables:change column headers/footers</h1>
<div class="container">
<table class="display" id="mustacheexample" cellpadding="0" cellspacing="0" border="0" width="100%" >
<thead>
<tr>
<th>{{name}}</th>
<th>{{address}}</th>
<th>{{age}}</th>
<th>{{price}}</th>
</tr>
</thead>
</table>
</textarea>
</div>
</body>
</html>
<div class="data">
<textarea id="data" style="display: none;">
var data = {
"name": "Name",
"age" : "Age",
"address" : "Address",
"price" : "Price"
}
</textarea>
</div>
<!-- Note: The following line is required in order to fill the table from the datatable -->
<script>changeLang()</script>
</body>
</html>
<!--------------------------------------- End of Mustache HTML template ----------------------------------------------->
Replies
See my other post on Internationalisation showing a way of switching data labels.
https://datatables.net/forums/discussion/34517/translate-field-names-into-other-languages-dynamically?new=1