Datatables / Internationalisation / languages /i18n

  1. MDB Home Page
  2. Support Main Page
  3. MDB jQuery
Topic: Datatables / Internationalisation / languages /i18n

AGoerlich asked 7 years ago

How can I use i18n in DataTables?

jouvrard pro answered 7 years ago

I answer my own question after few tests. In fact, if I use a json translation file, the "addclass('bs-select')" doesn't work, but if I integrate the translation directly in the function, no problem. So, this code works for a french translation for example: 
$('.dataTables').DataTable({
    "language": {
        "sProcessing":     "Traitement en cours...",
        "sSearch":         "Rechercher :",
        "sLengthMenu":     "Afficher _MENU_ éléments",
        "sInfo":           "Affichage de l'élément _START_ à _END_ sur _TOTAL_ éléments",
        "sInfoEmpty":      "Affichage de l'élément 0 à 0 sur 0 élément",
        "sInfoFiltered":   "(filtré de _MAX_ éléments au total)",
        "sInfoPostFix":    "",
        "sLoadingRecords": "Chargement en cours...",
        "sZeroRecords":    "Aucun élément à afficher",
        "sEmptyTable":     "Aucune donnée disponible dans le tableau",
        "oPaginate": {
            "sFirst":      "Premier",
            "sPrevious":   "Précédent",
            "sNext":       "Suivant",
            "sLast":       "Dernier"
        },
        "oAria": {
            "sSortAscending":  ": activer pour trier la colonne par ordre croissant",
            "sSortDescending": ": activer pour trier la colonne par ordre décroissant"
        },
        "select": {
                "rows": {
                    "_": "%d lignes sélectionnées",
                    "0": "Aucune ligne sélectionnée",
                    "1": "1 ligne sélectionnée"
                } 
        }
    }
});

giorgio.ponza pro premium priority commented 7 years ago

I use the same option language: { url: '/mdb/datatables/lang/it.json' } and Datatables is in italian, so i think your problem is somewhere else, maybe the url is wrong (context path?) My translation is from datatables plugin section, without editing, it's obviously a json text file.

jouvrard pro commented 7 years ago

Thank you for your reply, but the path I use is OK (my table is in french), but it has as a side effect to "desactivate" the select box. :) I'm going to try with the italian file in few minutes because I also took the french one from datatables plugin section and I saw 3 mistakes inside, so, maybe there are other!

Bartłomiej Malanowski staff pro premium commented 7 years ago

@jouvrard did you check it? What's the status of your issue?

jouvrard pro commented 7 years ago

I've tested with the italian translation file but the problem is the same. To be clear (because I Don't know if I am ;)), my dataTable is translated if I use a translation file or write the translation in the function. The only thing which doesn't work by using a translation file is that the "show XX records" field doesn't appear. I Don't know why, but as it works with all the translation in the function parameter, I'll use this solution.

Michal Szymanski staff pro premium priority answered 7 years ago

Specify your question please. What result exactly do you want to achieve? What have you tried so far?

jouvrard pro answered 7 years ago

I continue this subject because I try to translate dataTables in french, using the given json files in the DataTables website. https://datatables.net/reference/option/language.url But when I add the configuration, the select box to show xx records in one page disappears. It works: 
$('.dataTables').DataTable();
$('.dataTables_length').addClass('bs-select');
It doesn't work:
$('.dataTables').DataTable({ "language": { "url": "/include/lang/dataTables_fr_FR.json" } }); $('.dataTables_length').addClass('bs-select'); Is there a solution please? :)

Huichofer pro commented 7 years ago

Hey jouvrard,

It's been a while since this post, but I was in the same scenario today, and want to share my fix. Seems that when language is applied, the table is re-drawn and whipes out the 'bs-select' class.

In order to deal with that, put the addClass after the initialization of the datatable. Something like..

$('#MyDataTable').DataTable({ "language": { "url": "/include/lang/dataTables_fr_FR.json" } });

$('#MyDataTable').on('init.dt', function () { $(".dataTables_length").addClass("bs-select"); });

Here's the list of events if "init" doesn't work for you (it did for me). https://datatables.net/manual/events

Hope it helps. Regards
Write
Create snippet
Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Status

Answered

Specification of the issue
  • User: Free
  • Premium support: No
  • Technology: MDB jQuery
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No
About author
AGoerlich
0Support score
3Questions 0Answers
0Snippets likes 0Snippets