Holiday Notice: Support will be provided on a limited scale from December 24th, 2024, to January 2nd, 2025. Happy holidays and a wonderful New Year!

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

AGoerlich free asked 6 years ago

How can I use i18n in DataTables?

jouvrard pro answered 6 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 priority commented 6 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 6 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 commented 6 years ago

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

jouvrard pro commented 6 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.

jouvrard pro answered 6 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 5 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

Michal Szymanski staff answered 6 years ago

Specify your question please. What result exactly do you want to achieve? What have you tried so far?
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
  • ForumUser: Free
  • Premium support: No
  • Technology: MDB jQuery
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No
Tags
About author
AGoerlich
0Support score
3Questions 0Answers 0Snippets