Replies

• kthorngren Posts: 21,341Questions: 26Answers: 4,954

  July 22

  The Datatables options are a Javascript object which supports only unique keys. You can combine both language options into one object like this:

      language: { url: 'js/datatables/fr-FR.json',
          "buttons": {
              "colvisRestore": "tout sélectionner"
          }
      },
  

  Kevin
• MelodyNelson Posts: 213Questions: 33Answers: 2

  July 23

  Thanks Kevin,

  I just try but the « personnal translation » for « ColvisRestore » doesn't seems to be used by DT.

  I've made a test case :
  https://live.datatables.net/bomiwixa/1/edit?html,css,js,output

  Did I miss something ?
• allan Posts: 63,516Questions: 1Answers: 10,473 Site admin

  July 23

  The issue here is that you are setting the defaults. It is a sequence of events problem.

  1. The default is set
  2. The DataTable is initialised and the language file loaded
  3. The language file includes a value for colvisRestore so it is set

  Given the sequence, although the outcome might not be what is desired, I think it is correct.

  If you set the value in the DataTables initialisation, it works without problem: https://live.datatables.net/bomiwixa/3/edit .

  Allan
• MelodyNelson Posts: 213Questions: 33Answers: 2

  July 23

  Thanks Allan

  I understand. I was putting it in the « general default options » because I didn't want to repeat it for each table.

  The website is not finished yet and I probably already have 30 different tables, I'm trying to put a maximum of common settings in the general default options.

  Now it works. I have kept the language file in french in my « general default options » :

  Object.assign(DataTable.defaults, {
  //  language: { url: '//cdn.datatables.net/plug-ins/2.0.0/i18n/fr-FR.json' },
      language: { url: 'js/datatables/fr-FR.json'},
      lengthMenu: [5, 10, 25, 50, 100, { label: 'Tout', value: -1 }],
      pageLength: 25,
      pagingType: 'simple_numbers', // à modifier avec la version 2.1 (voir doc)
      processing: true,
      layout: {
          topStart: 'pageLength',
          topEnd: {
              search: {
                  text: '_INPUT_',
                  placeholder: 'Rechercher dans la liste'
              },
          },          
          bottomStart: 'info',
          bottomEnd: 'paging'
      },
      initComplete: function () {
          $('nav.pagination').addClass('is-small');
          $('div.dtsp-panesContainer button').addClass('is-small');
      },
      drawCallback: function (settings) {
          $('nav.pagination').addClass('is-small');
      },
  });
  

  And change the string for the colvis button in the table initialisation without the link to the json file :

  var table = new DataTable('#liste_projets', {
              data: dataSetProjets,
              columns: contenuColonnesProjets,
              language: {
                  "buttons": {
                      "colvisRestore": "tout sélectionner"
                  }
              },
              layout: {
                  top3: 'searchPanes',
                  top2: {
                      buttons: [
                          {
                              extend: 'colvisGroup',
                              text: 'Présentation projets',
                              show: '.presentation',
                              hide: '.more'
                          },
                          {
                              extend: 'colvisGroup',
                              text: 'Tout afficher',
                              show: '.more'
                          },
                          {
                              extend: 'colvis',
                              text: 'Colonnes à afficher',
                              postfixButtons: [ 'colvisRestore' ],
                              collectionLayout: 'fixed columns',
                              collectionTitle: '<strong>Sélectionner les colonnes à afficher / masquer</strong>',
                          //  css des colonnes qui ne sont pas proposées dans les choix   
                              columns: ':not(.deploiement, .details, .ged, .filtre, .none)'
                          }
                      ]
                  },
  etc...