reactive translation - Githubissues

noxtri commented 8 years ago

I am trying to translate the pagination the search,etc,but using the method from the docs its not reactive if i change the language it doesnt change the texts.I am using it like this.

Template.admin_users.onCreated(function () {
    $.extend(true, $.fn.dataTable.defaults, {
          language: {
            "lengthMenu": TAPi18n.__("table_length"),
            "zeroRecords": TAPi18n.__("table_zero_records"),
            "info": TAPi18n.__("table_info"),
            "infoEmpty": TAPi18n.__("table_zero_records"),
            "infoFiltered": TAPi18n.__("table_info_filtered"),
            "buttons": {
              "print":TAPi18n.__("print"),
              "copy":TAPi18n.__("copy"),
              "colvis":TAPi18n.__("colvis"),
              "copyTitle": TAPi18n.__("copy_title"),
              "copyKeys": TAPi18n.__("copy_keys"),       
            }
          },
          "oLanguage": {
            "oPaginate": {
              "sNext": TAPi18n.__("next"),
              "sPrevious": TAPi18n.__("previous")      
            },      
            "sEmptyTable": TAPi18n.__("table_zero_records"),
            "sSearch": TAPi18n.__("search")    
          },       
      });
})

i actually managed to make the buttons reactive i added some functions to the package because datatables function text caused the buttons to disappear when i was changing the language but i cant manage to change the others without heavy manipulation of the dom.Is there a way to actually translate the pagination,search,etc?

ricaragao commented 5 years ago

@noxtri did you solve this situation?

virgiliogm commented 3 years ago

I'm facing this same issue. I have several datatables (displayed in different sections of my webapp) that I initialize on my client startup code and I've realized that to get the desired reactivity I must first recreate the tables to update their internationalization settings and then rerender the current template to display the updated tables.

My workaround consist in:

Create a global helper 'renderTables' that returns the value of a boolean ReactiveVar global.renderTables.
Wrap the tabular template rendering in a conditional block:

    {{#if renderTables}}
        {{ > tabular table=TabularTables.MyTable }}
    {{/if}}

Recreate the tables and change and revert the value of the ReactiveVar when language is changed:

i18n.on('languageChanged', () => {
    CreateTables();
    global.renderTables.set(false);
    Meteor.defer(() => {
      global.renderTables.set(true);
    });
});

This way, the tables are rerendered when language is changed, but of course is a bit annoying to write this code and create the conditional block to wrap each table or section with tables. It would be great if the package provided a cleaner method to achieve this, like setting a reactive field that tabular evaluates in an autorun block to recreate the tables when the value changes.

Meteor-Community-Packages / meteor-tabular

reactive translation #274