How can I use another language for both the Editor part as the DataTable part.

Tester2017

I'm testing DataTables and Editor since a few days. I like it and probably will acquire a license. But there is something that I still do not understand.

I want to use different languages. OK, so I started with the Editor part (manual translations in the script) and this works fine. But a weird thing happens when I'm following the documentation on this site for adding languages to DataTables.

language: {
    url: '//cdn.datatables.net/plug-ins/1.10.15/i18n/Portuguese-Brasil.json'
}

If I use this script it is showing the navigation buttons below the table in my "new" language, but the New, Edit and Delete buttons are gone.

If I comment the language link out, the New, Edit and Delete buttons are in the "new" language and the navigation in English.

Is there something I am doing wrong. For me, it is important that I can use different languages.

Thanks in advance for suggestions and/or reactions, Tester2017.

Below the complete code:

(function($){

$(document).ready(function() {
    var editor = new $.fn.dataTable.Editor( {
        ajax: 'Ajax/Restaurant',
        table: '#restaurants',
        fields: [
            {
                "label": "Nome:",
                "name": "name"
            }
        ],
        i18n: {
            create: {
                button: 'Novo',
                title:  'Adicionar novo registro',
                submit: 'Adicionar'
            },
            edit: {
                button: 'Editar',
                title:  'Atualizar o registro',
                submit: 'Atualizar'
            },
            remove: {
                button: 'Excluír',
                title:  'Excluír o registro',
                submit: 'Excluír',
                confirm: {
                    _: 'Tem certeza de que deseja excluír estes %d registros?',
                    1: 'Tem certeza de que deseja excluír este registro?'
                }
            },
            error: {
                system: 'Um erro aconteceu, entre em contato com o administrador do sistema.'
            },
            datetime: {
                previous: 'Anterior',
                next:     'Próximo',
                months:   ['Janeiro', 'Fevereiro', 'Março', 'Abril', 'Maio', 'Junho', 'Julho', 'Agosto', 'Septembro', 'Outubro', 'Novembro', 'Dezembro' ],
                weekdays: ['Seg', 'Ter', 'Qua', 'Qui', 'Sex', 'Sáb', 'Sun' ]
            }
        }
    } );

    var table = $('#restaurants').DataTable( {
        language: {
            url: '//cdn.datatables.net/plug-ins/1.10.15/i18n/Portuguese-Brasil.json'
        },

        ajax: {
            url: 'Ajax/Restaurant',
            type: "POST"
        },
        serverSide: true,
        columns: [
            {
                "data": "name"
            }
        ],
        select: true,
        lengthChange: false
    } );

    new $.fn.dataTable.Buttons( table, [
        { extend: "create", editor: editor },
        { extend: "edit",   editor: editor },
        { extend: "remove", editor: editor }
    ] );

    table.buttons().container()
        .appendTo( $('.col-sm-6:eq(0)', table.table().container() ) );
} );

}(jQuery));

rf1234

This post might help you a little: https://datatables.net/forums/discussion/comment/110824/#Comment_110824

I have two languages on my site English(UK) and German. If the language is German I replace a lot of Editor and Data Tables defaults. Works fine. Since a language change always means a page refresh on my site I have no issues and I don't need to have all of this stuff in the individual Editor and table definitions either. Good luck!!

allan

You need to move the Buttons initialisation into initComplete. The issue is that the language.url option makes the table init async - so to doesn't currently really exist when the Buttons are initialised. Using initComplete resolves that.

Allan

Tester2017

Allan thank you very much, also rf1234 thank you for your suggestion. The answer of Allan resolved my issue (at least till now ).

For others who might have an equal problem, here me modified code:

    var table = $('#restaurants').DataTable( {
       language: {
            url: '//cdn.datatables.net/plug-ins/1.10.15/i18n/Portuguese-Brasil.json'
        },
        initComplete: function(settings, json) {
            new $.fn.dataTable.Buttons( table, [
                { extend: "create", editor: editor },
                { extend: "edit",   editor: editor },
                { extend: "remove", editor: editor }
            ] );

            table.buttons().container()
            .appendTo( $('.col-sm-6:eq(0)', table.table().container() ) );
        },

        ajax: {
            url: 'Ajax/Restaurant',
            type: "POST"
        },

        serverSide: true,
        columns: [
            {
                "data": "name"
            }
        ],
        select: true,
        lengthChange: false
    } );