i18n with nested editing

tnaescher

Hey everyone!

I use https://editor.datatables.net/examples/simple/i18nFile.html in my DataTables.
However, i just couldn't get it to work together with https://editor.datatables.net/examples/datatables/nested.html. (The nested Editor is always in english, no matter where i add the i18n file url)
Where do the i18n settings have to be specified when using nested input?

Best,
Tim

rf1234

Where do the i18n settings have to be specified when using nested input?

The same place as usual I am tempted to say. I did not do anything about i18n for nested editing. It just worked from the start.

These are my Editor i18n settings for German which work fine:

if (lang === 'de') {
    $.extend( true, $.fn.dataTable.Editor.defaults, {            
        i18n: {
            remove: {
                button: "Löschen",
                title:  "Eintrag löschen",
                submit: "Endgültig Löschen",
                confirm: {
                    _: 'Sind Sie sicher, dass Sie die %d ausgewählten Zeilen löschen wollen?',
                    1: 'Sind Sie sicher, dass Sie die ausgewählte Zeile löschen wollen?'
                }
            },
            edit: {
                button: "Bearbeiten",
                title:  "Eintrag bearbeiten",
                submit: "Änderungen speichern"
            },
            create: {
                button: "Neuer Eintrag",
                title:  "Neuen Eintrag anlegen",
                submit: "Neuen Eintrag speichern"
            },
            datetime: {
                    previous: 'Zurück',
                    next:     'Weiter',
                    months:   [ 'Januar', 'Februar', 'März', 'April', 'Mai', 'Juni', 'Juli', 'August', 'September', 'Oktober', 'November', 'Dezember' ],
                    weekdays: [ 'So', 'Mo', 'Di', 'Mi', 'Do', 'Fr', 'Sa' ],
                    amPm:     [ 'am', 'pm' ],
                    hours:    'Stunde',
                    minutes:  'Minute',
                    seconds:  'Sekunde',
                    unknown:  '-'
            },
            error: {
                    system: "Ein Systemfehler ist aufgetreten (<a target=\"_blank\" href=\"//datatables.net/tn/12\">Für mehr Informationen</a>)."
            },
            multi: {
                    title: "Mehrere Werte",         
                    info: "Die ausgewählten Zeilen enthalten verschiedene Werte für dieses Feld. Um alle Zeilen auf den gleichen Wert zu setzen, \n\
                           klicken Sie bitte hier. Ansonsten werden die Zeilen ihren individuellen Wert für das Feld behalten.",
                    restore: "Änderungen rückgängig machen",
                    noMulti: "Dieses Feld kann einzeln bearbeitet werden, aber nicht als Teil einer Gruppe."
            }
        }      
    });
}

The code above needs to be executed prior to Editor initialization.

I have German "language" settings for the data table as well which are also neatly applied to the nested data table inside the parent Editor form.

tnaescher

Interesting - i use "language: {url: '/i18n/de-DE.json'}," everywhere.
I even added this in every config available - the DataTable initialization as well as both Editor Initializations. Doesn't change anything
Works on the "Big" Table and Editor, doesn't change anything in the "Nested" Editor ...

Any ideas?

allan

Hi,

Have you tried using the config option for the datatable field type to specify options for the inner table? e.g.:

fields: [
  {
    label: 'My data',
    data: 'fieldName',
    type: 'datatable',
    config: {
      language: {
        url: 'i18n/de-DE.json'
      }
   },
   // ...
]

Allan

rf1234

That is all pretty surprising! I also use "config.language" with field type datatable but only to hide a couple of controls that are not suitable for embedded datatables in my opinion. This does not hurt my overall language settings which are either German or English. The German language version as defined above.

This is what it looks like:

English:

I also use this independent of user language:

var languageEditorDts =  { info: "",infoEmpty: "",
                           select: { rows: { _: '', 0: '', 1: '' } } };
...
}, {
            label: lang === 'de' ? 'Mittelabruf(e):' : 'Call(s) for Funds:',
            name: 'sub_exec_cashflow[].id',
            type: 'datatable',
            editor: subExecCashflowEditor,
            submit: false,
            config: {
                searching: false,
                fixedHeader: false,
                paging: false,
                ajax: {
                    url: 'actions.php?action=tblSubExecCashflow',
                    type: 'POST',
                    data: function ( d ) {
                        d.ctr_id = parentId;
                        d.is_sub_provider = parentIsSubProvider;
                    }
                },
                language: languageEditorDts,
                buttons: [
                    { extend: 'create', editor: subExecCashflowEditor },
                    { extend: 'edit',   editor: subExecCashflowEditor },
                    { extend: 'remove', editor: subExecCashflowEditor }
                ],
                order: [[0, 'asc']],
                columns: [
                    {   title: lang === 'de' ? 'Frist Mittelabruf' : 'Deadline Funds Call',
                        data: 'sub_exec_cashflow.cashflow_due_date'         },
                    {   title: lang === 'de' ? 'Abrufbetrag' : 'Call Amount',
                        data: 'sub_exec_cashflow.cashflow_amount'           },
                    {   title: lang === 'de' ? 'Erste Erinnerung' : 'First Reminder',
                        data: 'sub_exec_cashflow.first_reminder_date'       },
                    {   title: lang === 'de' ? 'Zweite Erinnerung' : '2nd Reminder',
                        data: 'sub_exec_cashflow.second_reminder_date'      },
                    {   title: lang === 'de' ? 'Datum Mittelabruf' : 'Date Funds Call',
                        data: 'sub_exec_cashflow.cashflow_call_date'        }
                ]
            }
        }, {
...

rf1234

There could be a different cause for this. If you are using the same i18n file for both Editor and Data Tables it's not going to work.

In Data Tables this stuff is called "language" and in Editor it is called "i18n". God knows why?!

You've already seen my settings for Editor above. And how I override my Data Tables settings below (NOT my Editor settings!!) for field type "datatable" using "language". Please note: I hardly ever use "language" with other data tables because I changed the default for all data tables if user language is German.

So here are my default settings for Data Tables. Again this code must be executed before DT initialization.

if (lang === 'de') {
    $.extend( true, $.fn.dataTable.defaults, {
        "language": {
            "decimal": ",",
            "thousands": ".",
            "info": "Anzeige _START_ bis _END_ von _TOTAL_ Einträgen",
            "infoEmpty": "Keine Einträge",
            "infoPostFix": "",
            "infoFiltered": "(gefiltert aus insgesamt _MAX_ Einträgen)",
            "loadingRecords": "Bitte warten Sie - Daten werden geladen ...",
            "lengthMenu": "Anzeigen von _MENU_ Einträgen",
            "paginate": {
                "first": "Erste",
                "last": "Letzte",
                "next": "Nächste",
                "previous": "Zurück"
            },
            "processing": "<span class='fa-stack fa-lg'>\n\
                                <i class='fa fa-spinner fa-spin fa-stack-2x fa-fw'></i>\n\
                           </span>&emsp;Verarbeitung läuft ...",
            "search": "Suche:",
            "searchPlaceholder": "Suchbegriff",
            "zeroRecords": "Keine Daten! Bitte ändern Sie Ihren Suchbegriff.",
            "emptyTable": "Keine Daten vorhanden",
            "aria": {
                "sortAscending":  ": aktivieren, um Spalte aufsteigend zu sortieren",
                "sortDescending": ": aktivieren, um Spalte absteigend zu sortieren"
            },
            //only works for built-in buttons, not for custom buttons
            "buttons": {
                "create": "Neu",
                "edit": "Ändern",
                "remove": "Löschen",
                "copy": "Kopieren",
                "csv": "CSV-Datei",
                "excel": "Excel-Tabelle",
                "pdf": "PDF-Dokument",
                "print": "Drucken",
                "colvis": "Spalten Auswahl",
                "collection": "Auswahl",
                "upload": "Datei auswählen....",
                "selectNone": "Auswahl aufheben"
            },
            "select": {
                "rows": {
                    _: '%d Zeilen ausgewählt',
                    0: 'Zeile anklicken um auszuwählen',
                    1: 'Eine Zeile ausgewählt'
                }
            }
        }            
    } );        
} else { //a couple of changes to the English version as well
    $.extend( true, $.fn.dataTable.defaults, {
        "language": {
            "processing": "<span class='fa-stack fa-lg'>\n\
                                <i class='fa fa-spinner fa-spin fa-stack-2x fa-fw'></i>\n\
                           </span>&emsp;Processing ...",
            "select": {
                "rows": {
                    _: '%d rows selected',
                    0: 'Click row to select',
                    1: '1 row selected'
                }
            }
        }
    } );
}

allan

In Data Tables this stuff is called "language" and in Editor it is called "i18n". God knows why?!

Legacy! As with most quirks . I should really map i18n in DataTables to align with what Editor does...

Allan

rf1234

Initially I got very much confused by these things. And I also think both terms "language" and "i18n" are inappropriate in a way.

Why? You need to use those even though you aren't doing any kind of InternationalizatioN and are not using more than one language: Even if you just want to use deviating wording you need to use either "language" or "i18n"!

Why not just call it "wording" or whatever suitable comes to mind?

tnaescher

Hey everyone, thanks for your answers.

For testing, I purged my DataTable / Editor Objects of the JSON-URLs and added rf1234's code exactly as given - as soon as i added both of them (for DataTable as well as Editor's) it worked!
To avoid tons of duplicated "code" in every DataTables, I then put rf1234's translations into a json file (like the one provided by DataTables somewhere in the docs):

        $.extend(true, $.fn.dataTable.Editor.defaults, {
            i18n: {
                "url": "i18n/de-DE-editor.json"
            }
        });
        $.extend(true, $.fn.dataTable.defaults, {
            language: {
                "url": "i18n/de-DE-datatables.json"
            }
        });

Works wonderful

Thanks everyone for helping!

rf1234

Glad you got it working

To avoid tons of duplicated "code" in every DataTables, I then put rf1234's translations into a json file

Since you and me are using "Editor.defaults" and "datatable.defaults" there is no code dupliation regardless of whether or not you are using a json file. You need both statements just once and they work for all of your Editors and Data Tables. For that reason I don't use the json files.

allan

The other advantage of not using language files is that you don't then incur extra Ajax calls to get them. There is no caching of the language files, so each table would trigger a new Ajax call (the browser will likely cache them though).

Why not just call it "wording" or whatever suitable comes to mind?

strings is another option, but language and i18n are fairly common from what I've seen in other libraries. The options can be used for i18n, so I generally prefer that option myself.

Allan

tnaescher

Alright, i see. Did you put the defaults somewhere in the DataTables-Library source? If i put the defaults in the js code for my table, it obviously doesn't carry over to other .html pages with other tables.

allan

Yes, the default language strings are in the core code. The method suggested by @rf1234 sets those default values so they are then used for any future initialisation on that page.

Allan

rf1234

Just to share an approach to avoid code redundancy using Editor and Data Tables:

I run an "init" function prior to data table initialization on all of my pages. This function contains everything that applies to all of my data tables on all of my pages.

It has all of these default settings that I don't want to do redundantly:
* language and i18n - depending on the user language
* moment.js settings - depending on the user language
* most of my custom buttons (whenever such a button is used more than once)
* state saving and loading settings
* lots of other options: responsive, fixed header, scrollX - to mention a few - that I use throughout all of my data tables

tnaescher

Ah, that makes sense. Good idea, I will implement that for sure when I find the time! Thanks for the suggestions