Datatables Editor i18n for nested Datatables + Editor

Datatables Editor i18n for nested Datatables + Editor

SeanvbeurdenSeanvbeurden Posts: 2Questions: 1Answers: 0

I use the DataTables Editor field "datatable" to initiate DataTables + Editor inside the Editor of the "main" table. I try to configure the language via URL, which works well for the initial DataTable en its Editor and the nested DataTable, but not for the nested Editor. I have set the language in the config of the nested datatable like this:

type: "datatable",
        editor: partnerEditor,
        config: {
          language: {
            url: locale.datatablesTranslationLink(),
          },

The function datatablesTranslationLink returns a string like this:

`${__dirname}/../../json/datatables/datatables${
      language
    }.json`

Do I need to reference somewhere in the nested Editor setup to use the language file?
I have tried setting it in the beginning of the JS file:

$.extend(true, $.fn.dataTable.Editor.defaults, {
  i18n: {
      url: locale.datatablesTranslationLink(),
  }
});

But this didn't do anything.
The JSON is composed as follows:

{
    "lengthMenu": "_MENU_ resultaten weergeven",
    "zeroRecords": "Geen resultaten gevonden",
    "infoEmpty": "Geen resultaten om weer te geven",
    "search": "Zoeken",
    "searchPlaceholder": "Zoeken",
    "emptyTable": "Geen resultaten aanwezig in de tabel",
    "infoThousands": ".",
    "loadingRecords": "Een moment geduld aub - bezig met laden...",
    "paginate": {
        "first": "Eerste",
        "last": "Laatste",
        "next": "Volgende",
        "previous": "Vorige"
    },
    "aria": {
        "sortAscending": ": activeer om kolom oplopend te sorteren",
        "sortDescending": ": activeer om kolom aflopend te sorteren"
    },
    "autoFill": {
        "fill": "Vul alle cellen met <i>%d<\/i>",
        "fillHorizontal": "Vul cellen horizontaal",
        "fillVertical": "Vul cellen verticaal",
        "cancel": "Annuleren"
    },
    "buttons": {
        "colvis": "Kolom zichtbaarheid",
        "colvisRestore": "Herstel zichtbaarheid",
        "copy": "Kopieer",
        "copySuccess": {
            "1": "1 regel naar klembord gekopieerd",
            "_": "%ds regels naar klembord gekopieerd"
        },
        "copyTitle": "Kopieer naar klembord",
        "csv": "CSV",
        "excel": "Excel",
        "pageLength": {
            "-1": "Toon alle regels",
            "_": "Toon %d regels"
        },
        "pdf": "PDF",
        "print": "Print",
        "copyKeys": "Klik ctrl of u2318 + C om de tabeldata to kopiëren naar je klembord. Om te annuleren klik hier of klik op escape.",
        "collection": "Verzameling",
        "createState": "Maak staat",
        "removeAllStates": "Verwijder alle",
        "removeState": "Verwijder",
        "renameState": "Hernoem",
        "savedStates": "Opgeslagen",
        "updateState": "Bijwerken"
    },
    "processing": "Bezig met verwerken...",
    "decimal": ",",
    "searchBuilder": {
        "add": "Toevoegen",
        "clearAll": "Verwijder alles",
        "condition": "Conditie",
        "data": "Data",
        "deleteTitle": "Verwijder",
        "value": "Waarde",
        "conditions": {
            "date": {
                "after": "Na",
                "before": "Voor",
                "between": "Tussen",
                "empty": "Leeg",
                "equals": "Gelijk aan",
                "not": "Niet",
                "notBetween": "Niet tussen",
                "notEmpty": "Niet leeg"
            },
            "number": {
                "between": "Tussen",
                "empty": "Leeg",
                "equals": "Gelijk aan",
                "gt": "Groter dan",
                "gte": "Groter dan of gelijk aan",
                "lt": "Kleiner dan",
                "lte": "Kleiner dan of gelijk aan",
                "not": "Niet",
                "notBetween": "Niet tussen",
                "notEmpty": "Niet leeg"
            },
            "string": {
                "contains": "Bevat",
                "empty": "Leeg",
                "endsWith": "Eindigt met",
                "equals": "Gelijk aan",
                "not": "Niet",
                "notEmpty": "Niet leeg",
                "startsWith": "Start met",
                "notContains": "Zonder",
                "notEnds": "Eindigt niet met",
                "notStarts": "Begint niet met"
            },
            "array": {
                "equals": "Gelijk aan",
                "empty": "Leeg",
                "contains": "Bevat",
                "not": "Niet",
                "notEmpty": "Niet leeg",
                "without": "Zonder"
            }
        },
        "logicAnd": "En",
        "logicOr": "Of",
        "button": {
            "0": "Zoekwizard",
            "_": "Zoekwizard (%d)"
        },
        "leftTitle": "Afwijkende criteria",
        "rightTitle": "Criteria inspringen",
        "title": {
            "0": "Zoekwizard",
            "_": "Zoekwizard (%d) "
        }
    },
    "searchPanes": {
        "clearMessage": "Alles leegmaken",
        "collapse": {
            "0": "Zoekpanelen",
            "_": "Zoekpanelen (%d)"
        },
        "count": "{total}",
        "countFiltered": "{shown} ({total})",
        "emptyPanes": "Geen zoekpanelen",
        "loadMessage": "Zoekpanelen laden...",
        "title": "%d filters actief",
        "showMessage": "Alles weergeven",
        "collapseMessage": "Instorten"
    },
    "select": {
        "rows": {
            "1": "1 rij geselecteerd",
            "_": "%d rijen geselecteerd"
        }
    },
    "thousands": ".",
    "info": "_START_ tot _END_ van _TOTAL_ resultaten",
    "infoFiltered": " (gefilterd uit _MAX_ resultaten)",
    "datetime": {
        "previous": "Vorige",
        "next": "Volgende",
        "hours": "Uur",
        "minutes": "Minuut",
        "seconds": "Seconde",
        "unknown": "Onbekend",
        "amPm": [
            "vm",
            "nm"
        ],
        "weekdays": [
            "Zo",
            "Ma",
            "Di",
            "Wo",
            "Do",
            "Vr",
            "Za"
        ],
        "months": [
            "Januari",
            "Februari",
            "Maart",
            "April",
            "Mei",
            "Juni",
            "Juli",
            "Augustus",
            "September",
            "Oktober",
            "November",
            "December"
        ]
    },
    "editor": {
        "close": "Sluiten",
        "create": {
            "button": "Nieuw",
            "title": "Voeg nieuwe gegevens toe",
            "submit": "Toevoegen"
        },
        "edit": {
            "button": "Wijzigen",
            "title": "Wijzig gegevens",
            "submit": "Wijzigen"
        },
        "remove": {
            "button": "Verwijderen",
            "title": "Verwijder",
            "submit": "Verwijder",
            "confirm": {
                "_": "Bent u zeker dat u %d rijen wil verwijderen?",
                "1": "Bent u zeker dat u 1 rij wil verwijderen?"
            }
        },
        "error": {
            "system": "Er is iets fout gegaan"
        },
        "multi": {
            "title": "Meerdere waarden",
            "info": "De geselecteerde items bevatten verschillende waarden voor deze invoer. Om alle items voor deze invoer op dezelfde waarde te zetten, klik of tik hier, zoniet zullen de individuele waarden behouden blijven.",
            "restore": "Wijzigingen ongedaan maken",
            "noMulti": "Deze invoer kan individueel gewijzigd worden, maar niet als deel van een groep."
        }
    },
    "stateRestore": {
        "creationModal": {
            "button": "Aanmaken",
            "columns": {
                "search": "Zoeken in kolom",
                "visible": "Kolom tonen"
            },
            "name": "Naam",
            "order": "Sorteervolgorde",
            "paging": "Paginering",
            "scroller": "Meescrollen",
            "search": "Zoeken",
            "searchBuilder": "SearchBuilder",
            "select": "Selecteer",
            "title": "Nieuwe staat aanmaken",
            "toggleLabel": "Bevat"
        },
        "duplicateError": "Staat bestaat al",
        "emptyError": "Naam kan niet leeg zijn",
        "emptyStates": "Geen beschikbare staten",
        "removeConfirm": "Weet u zeker dat u deze wil verwijderen:",
        "removeError": "De verwijdering is mislukt",
        "removeJoiner": "en",
        "removeSubmit": "Verwijder",
        "removeTitle": "Verwijder staat",
        "renameButton": "Hernoem",
        "renameLabel": "Nieuwe naam voor staat",
        "renameTitle": "Hernoem staat"
    },
    "sProcessing": "Bezig...",
    "sLengthMenu": "_MENU_ resultaten weergeven",
    "sZeroRecords": "Geen resultaten gevonden",
    "sInfo": "_START_ tot _END_ van _TOTAL_ resultaten",
    "sInfoEmpty": "Geen resultaten om weer te geven",
    "sInfoFiltered": " (gefilterd uit _MAX_ resultaten)",
    "sSearch": "Zoeken:",
    "sEmptyTable": "Geen resultaten aanwezig in de tabel",
    "sInfoThousands": ".",
    "sLoadingRecords": "Een moment geduld aub - bezig met laden...",
    "oPaginate": {
        "sFirst": "Eerste",
        "sLast": "Laatste",
        "sNext": "Volgende",
        "sPrevious": "Vorige"
    },
    "oAria": {
        "sSortAscending":  ": activeer om kolom oplopend te sorteren",
        "sSortDescending": ": activeer om kolom aflopend te sorteren"
    }
}

I can't give you a working example, because the rest of the script uses a lot of state (which is intertwined with the DataTables API a lot) and the site has a lot of vulnerable data.

This question has an accepted answers - jump to answer

Answers

  • rf1234rf1234 Posts: 2,906Questions: 87Answers: 414
    edited December 2023 Answer ✓

    Hi, you can do that much easier by setting Data Tables and Editor defaults. Then you don't have to do anything during Editor and Data Table initialization. The code also works for field type "datatable" and parent-child-editing. Make sure you run this code before initialization. Then you don't need any "language" and "i18n" options in your Data Table and Editor definitions.

    I have two languages: German (Germany) and English (UK)

    This is for Editor (in case of German; English is the default anyway)

    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."
                }
            }      
        });
    }
    

    This is for all of my data tables. Here I also add something to the English defaults.

    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": '<span class="fa fa-file-excel-o"></span>',
                    "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 {
        $.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 ...",
                "buttons": {
                    "excel": '<span class="fa fa-file-excel-o"></span>',
                },
                "select": {
                    "rows": {
                        _: '%d rows selected',
                        0: 'Click row to select',
                        1: '1 row selected'
                    }
                }
            }
        } );
    }
    
  • SeanvbeurdenSeanvbeurden Posts: 2Questions: 1Answers: 0

    @rf1234 Thanks for the quick response!
    If I paste in the JSON for the Editor literally it indeed works.

    I want to have the translation logic in the locale Class (Typescript).
    It really adds to the load to have this logic duplicated over multiple files.

    While typing I got an idea and it works, just made a method that returns an object with the data, so the logic is encapsulated in the class.

    It still isn't perfect, but it works for now so I will set the question as answered

  • rf1234rf1234 Posts: 2,906Questions: 87Answers: 414

    Glad you found a solution!

    While I don't speak Dutch and cannot follow a Dutch conversation I can more or less read it.
    I really like this one "Er is iets fout gegaan" :smile:

    Have a great weekend!

Sign In or Register to comment.