Using the json file for language + personnal translations in the DT options

MelodyNelson

Link to test case:
Debugger code (debug.datatables.net):
Error messages shown:
Description of problem:

Hi,

I'm using the french json file language for DT and sometimes I just want to change some translation without changing the json file (in case I need to update the file with next versions of DT, I don't want to lose my adaptations).

For example, I have this setting for all my tables with default options and I need to change one string.
I'm using a local json file + one pamaterer for the buttons but it created problems with the other strings.

Is it because we can't mix the 2 methods or I didn't do it right ?

Object.assign(DataTable.defaults, {
//  language: { url: '//cdn.datatables.net/plug-ins/2.0.0/i18n/fr-FR.json' },
    language: { url: 'js/datatables/fr-FR.json' },
    language: {
        "buttons": {
            "colvisRestore": "tout sélectionner"
        }
    },
    lengthMenu: [5, 10, 25, 50, 100, { label: 'Tout', value: -1 }],
    pageLength: 25,
    pagingType: 'simple_numbers', // numbers, simple_numbers, full_numbers
    processing: true,
    layout: {
        topStart: 'pageLength',
        topEnd: {
            search: {
                text: '_INPUT_',
                placeholder: 'Rechercher dans la liste'
            },
        },          
        bottomStart: 'info',
        bottomEnd: 'paging'
    },
    initComplete: function () {
        $('nav.pagination').addClass('is-small');
        $('div.dtsp-panesContainer button').addClass('is-small');
    },
    drawCallback: function (settings) {
        $('nav.pagination').addClass('is-small');
    },
});

Thank you

kthorngren

The Datatables options are a Javascript object which supports only unique keys. You can combine both language options into one object like this:

    language: { url: 'js/datatables/fr-FR.json',
        "buttons": {
            "colvisRestore": "tout sélectionner"
        }
    },

Kevin

MelodyNelson

Thanks Kevin,

I just try but the « personnal translation » for « ColvisRestore » doesn't seems to be used by DT.

I've made a test case :
https://live.datatables.net/bomiwixa/1/edit?html,css,js,output

Did I miss something ?

allan

The issue here is that you are setting the defaults. It is a sequence of events problem.

1. The default is set
2. The DataTable is initialised and the language file loaded
3. The language file includes a value for colvisRestore so it is set

Given the sequence, although the outcome might not be what is desired, I think it is correct.

If you set the value in the DataTables initialisation, it works without problem: https://live.datatables.net/bomiwixa/3/edit .

Allan

MelodyNelson

Thanks Allan

I understand. I was putting it in the « general default options » because I didn't want to repeat it for each table.

The website is not finished yet and I probably already have 30 different tables, I'm trying to put a maximum of common settings in the general default options.

Now it works. I have kept the language file in french in my « general default options » :

Object.assign(DataTable.defaults, {
//  language: { url: '//cdn.datatables.net/plug-ins/2.0.0/i18n/fr-FR.json' },
    language: { url: 'js/datatables/fr-FR.json'},
    lengthMenu: [5, 10, 25, 50, 100, { label: 'Tout', value: -1 }],
    pageLength: 25,
    pagingType: 'simple_numbers', // à modifier avec la version 2.1 (voir doc)
    processing: true,
    layout: {
        topStart: 'pageLength',
        topEnd: {
            search: {
                text: '_INPUT_',
                placeholder: 'Rechercher dans la liste'
            },
        },          
        bottomStart: 'info',
        bottomEnd: 'paging'
    },
    initComplete: function () {
        $('nav.pagination').addClass('is-small');
        $('div.dtsp-panesContainer button').addClass('is-small');
    },
    drawCallback: function (settings) {
        $('nav.pagination').addClass('is-small');
    },
});

And change the string for the colvis button in the table initialisation without the link to the json file :

var table = new DataTable('#liste_projets', {
            data: dataSetProjets,
            columns: contenuColonnesProjets,
            language: {
                "buttons": {
                    "colvisRestore": "tout sélectionner"
                }
            },
            layout: {
                top3: 'searchPanes',
                top2: {
                    buttons: [
                        {
                            extend: 'colvisGroup',
                            text: 'Présentation projets',
                            show: '.presentation',
                            hide: '.more'
                        },
                        {
                            extend: 'colvisGroup',
                            text: 'Tout afficher',
                            show: '.more'
                        },
                        {
                            extend: 'colvis',
                            text: 'Colonnes à afficher',
                            postfixButtons: [ 'colvisRestore' ],
                            collectionLayout: 'fixed columns',
                            collectionTitle: '<strong>Sélectionner les colonnes à afficher / masquer</strong>',
                        //  css des colonnes qui ne sont pas proposées dans les choix   
                            columns: ':not(.deploiement, .details, .ged, .filtre, .none)'
                        }
                    ]
                },
etc...