How to get the Mustache tags to be updated in Datatables column headers/field names

James Morton · April 2016

I have been trying to use mustache to perform language translation. I have used the js below to translate 3 sample tags which it does dutifully. My problem is getting this to work on the actual datatables html.

Has anyone ever done this? My js output the translated tags after the html whereas I need it to update the tags in place.

        <script type="text/javascript" src="js/jquery-2.2.0.js" ></script>
        <script type="text/javascript" src="mustache/mustache.js" ></script>

    <script>
        function renderFunction() {  
            <!--    window.alert( $('#lang :selected').val());  -->                 
                var view = {
                        "Country Id" :      "country_id",
                        "Country Name" :    "country_name",
                        "My Estates"  :     "site_name"
                      };
                      
                $("#templates").load("templates.html.#"+$('#lang :selected').val(),function(){
                    //Grab the inline template
                                var template = document.getElementById($('#lang :selected').val()).innerHTML;

                                //Parse it (optional, only necessary if template is to be used again)
                                Mustache.parse(template);

                                //Render the data into the template
                                var rendered = Mustache.render(template, view);
                                
                    //Overwrite the contents of #content with the rendered HTML         
                                $("#content").append(rendered);  
                                });
                 return
                }
    </script>


<div id="en" >
James Estate Agency                 {{site_name}}
Country Id                          {{country_id}}
Country Name                            {{country_name}}
</div>

<div id="es" >
James Estate Agency                 {{site_name}}
Identificación del país                 {{country_id}}
Nombre del país                     {{country_name}}
</div>

<div id="fr" >
James Estate Agency                 {{site_name}}
Id pays                             {{country_id}}
Nom du pays                         {{country_name}}
</div>


/* My sample datatables html with the dropdown box to switch between 3 language templates. */


<body onload="renderFunction()">
  
    <select id="lang" onchange="renderFunction()">
        <option value="en">English </option>
        <option value="es">Spanish</option>
        <option value="fr">French</option>
    </select>
    
    <div id ="templates" style="display: none;"></div>
    <div id ="content" class="container">
    
    <body class="dataTables" >
                            
            <h1>
                Country<span> {site_name}</span>
            </h1>       

                <table cellpadding="0" cellspacing="0" border="0" class="display" id="country" width="100%">
                    <thead>
                        <tr>
                            <th>{country_id}</th>
                            <th>{country_name}</th>
                        </tr>
                    </thead>
                </table>
            </div>
        </div>
    </body>

Has anyone ever used mustache with data tables in this or a similar way? How do I get the embedded mustache tags to be updated?

Edited by Allan - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.

James Morton · April 2016

I have realised that I was using mustache templating the wrong way. I need to use the "data" to provide the different data item labels and the "template" is a bes inline .

<!doctype html>
<html lang="en">
  <head>
   
            <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/s/dt/jqc-1.11.3,moment-2.10.6,dt-1.10.10,b-1.1.0,se-1.1.0/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.11.3,moment-2.10.6,dt-1.10.10,b-1.1.0,se-1.1.0/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.country.js"></script>      

        <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 process() {
            var template, data, html,renderedhtml;
            template = $('#template').val();
            eval( $('#data').val() );
            html = Mustache.render( template, data );
            $('#html').text( html );
            window.alert(html);                 
            $("#country").html( html );
        }
    </script>   
    
  </head>
  
  <body onload="process()">
  
    <h1>Country<span> Estate Agency Ltd </span></h1>
        
        <body class="dataTables" >
     
<!--            <div class="process"><button onclick="process()">Process Template</button></div> -->
                
        <table cellpadding="0" cellspacing="0" border="0" class="display" id="country" width="100%">    
    
            <div id="result">
                <div class="result">
            </div>
        
        </table>         
        </body>
        
        <div id="wrap">
         
            <div class="template">
                <h3>Template Object:</h3>
                <textarea id="template">
                <thead>
                    <tr>
                          <th>{{country_id}}</th>
                          <th>{{country_name}}</th>
                    </tr>
                </thead>            
                </textarea>  
            </div>
         
            <div class="data">
                <h3>Data Object:</h3>
                <textarea id="data">
                var data = {
                  "country_id":         "Country Id",
                  "country_name" :  "Country Name"
                }
                </textarea>
             </div>
</html>

Edited by Allan - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.

allan · April 2016

Thanks for posting back - good to hear you've got a solution.

Allan

James Morton · April 2016

Answered by Dirk Finchley - see his example.

https://datatables.net/forums/discussion/34432/example-of-using-mustache-with-datatables-to-change-column-header-languages?new=1

How to get the Mustache tags to be updated in Datatables column headers/field names

How to get the Mustache tags to be updated in Datatables column headers/field names

Replies

Howdy, Stranger!

Categories

DataTables

How to get the Mustache tags to be updated in Datatables column headers/field names

How to get the Mustache tags to be updated in Datatables column headers/field names

Replies

Howdy, Stranger!

Quick Links

Categories

DataTables