Wednesday, 18 February 2015

How to change the default language when generating HTM Tables from DataTables JQuery Plugin ?

The default language for DataTables JQuery is English; Therefore, you might want, like me, have a different language (let's say in French); I found the solutions in these websites :
  • https://datatables.net/manual/i18n
  • http://www.datatables.net/examples/advanced_init/language_file (where you will find solutions for languages other than French)
Two ways are possible to solve that issue :

  • The first one is to add a 'language' option, followed by properties within json format data :

 var table_test =  $('#tbtest').dataTable( {
       "language": 
       {
        "processing":     "Traitement en cours...",
        "search":         "Rechercher :",
        "lengthMenu":    "Afficher _MENU_ éléments",
        "info":           "Affichage de l'élement _START_ à _END_ sur _TOTAL_ éléments",
        "infoEmpty":      "Affichage de l'élement 0 à 0 sur 0 éléments",
        "infoFiltered":   "(filtré de _MAX_ éléments au total)",
        "infoPostFix":    "",
        "loadingRecords": "Chargement en cours...",
        "zeroRecords":    "Aucun élément à afficher",
        "emptyTable":     "Aucune donnée disponible dans le tableau",
        "paginate": {
            "first":      "Premier",
            "previous":   "Précédent",
            "next":       "Suivant",
            "last":       "Dernier"
        },
        "aria": {
            "sortAscending":  ": activer pour trier la colonne par ordre croissant",
            "sortDescending": ": activer pour trier la colonne par ordre décroissant"
        }
       },
       "ajax": {
           "url": "../process.php?param=xxx",
          "dataSrc": ""
       }
[..]
} );

  • The second one is to save the json content (in orange above) into a file with a json extension into your web folder and access this file via Ajax using the language url option :

 var table_test =  $('#tbtest').dataTable( {
       "language": {
           "url": "../DataTables.French.json"  
       },
       "ajax": {
           "url": "../process.php?param=xxx",
          "dataSrc": ""
       }
[..]
} );
The resulting header will be that one for french translation


and that one for the footer: