how can I automatically change the language of the table using the selector of language in the UI?

olusia454

Hi, I have a problem with the datatable language, because by changing the language parameter directly in the code and reloading the page - everything works fine. The problem arises when I insert a selector in the UI to select the language and based on this I want to change the language of the whole page (including the table). The page header or other texts react to this change, but the table does not update. How should I approach the issue?

const currentLanguage = ref('en')


const translations = {
  en: translationsEN,
  pl: translationsPL,
}

const datatablesTranslations = {
  en: languageEN,
  pl: languagePL,
}

const getLanguageConfig = () => {
  return {
    ...datatablesTranslations[currentLanguage.value] || datatablesTranslations['en'],
  }
}

const t = (key: string) => {
  return translations[currentLanguage.value][key] || translations['en'][key] || key;
}

const setLanguage = (lang: string) => {
  currentLanguage.value = lang;
  localStorage.setItem('language', lang);  


  updateDataTableLanguage();
};

const updateDataTableLanguage = () => {
  if (dt) {

    $(dt.table().node()).DataTable().destroy(true);  
    $(table.value).DataTable({
      ...options,  
      language: getLanguageConfig(),  
      destroy: true,  
    });

    $(table.value).DataTable().ajax.reload(null, false);
  }
};

const options = {
  dom: "<'search-container'f>tip",
  responsive: true,
  select: true,
  language: getLanguageConfig(),
  paging: true,
  pageLength: 15,
  scrollCollapse: true,
  scrollY: '75vh',
  processing: false,
}

// Get a DataTables API reference
onMounted(() => {

  const savedLanguage = localStorage.getItem('language');
  if (savedLanguage) {
    currentLanguage.value = savedLanguage; 
  } else {
    currentLanguage.value = 'en';  
  }
  updateDataTableLanguage();
</script>

<template>
  <div :class="{ dark: isDarkMode }">
    <img
      src="/logo.png"
      alt="Logo"
      height="30"
      style="float: left; padding-right: 30px"
    />
    <div class="language-selector" style="float: right; padding-right: 30px; padding-top: 10px;">
  <select v-model="currentLanguage" @change="setLanguage(currentLanguage)" class="form-select">
    <option value="en">English</option>
    <option value="pl">Polski</option>
  </select>
</div>


    <h1>{{ t('orderoverview') }}</h1>

    <DataTable
      :columns="columns"
      :options="options"
      ajax="http://localhost:8080/test"
      class="display nowrap compact"
      width="100%"
      ref="table"
    >

     
      <thead>
        <tr>
          <th>{{ t('orderNumber') }}</th>
          <th>{{ t('vin') }}</th>
          <th>{{ t('licenseTag') }}</th>
          <th>{{ t('customerFirstname') }}</th>
          <th>{{ t('customerLastname') }}</th>
          <th>{{ t('lastSendDate') }}</th>
        </tr>
      </thead>

allan

You'd currently need to refresh the page on that change. The options in the component are not (yet) reactive. I say "yet", because this question (or something like it) has come up a few times recently and that is something that I will add.

Allan

olusia454

yes, but even after refreshing, elements such as column headers or search still do not update

allan

If you can give me a link to a test case, ideally on StackBltiz, so I can debug it, I'll take a look into the issue.

Allan