Replies

• allan Posts: 63,498Questions: 1Answers: 10,470 Site admin

  July 22

  Hmmm - I feel that is a bug actually. With 2.1 I had expected that to be centred. I'll look into that and post back with findings.

  Until then, this is the property to override.

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

  July 22

  Thank you Allan

  I'm not in 2.1 version yet, still in 2.0 but I will update soon to try the new features
• allan Posts: 63,498Questions: 1Answers: 10,470 Site admin

  July 23

  With 2.1 it was actually working, but only for windows larger than around 767px. Smaller than that it would incorrectly pull them to the left. I've committed a fix.

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

  July 23

  Thanks for the feedback Allan
  I will update my version soon
• MelodyNelson Posts: 213Questions: 33Answers: 2

  August 14 edited August 14

  Until then, this is the property to override.

  It's a newbie question but I don't know how to override this

  $.extend(true, DataTable.Buttons.defaults, {
      dom: {
          container: {
              className: 'dt-buttons field is-grouped'
          },
  

  with this kind of « short command » in my own JS file with the default options for DT I want like I did for the search input

  DataTable.ext.classes.search.input = "input";

  If I can delete « field » for the buttons, the vertical align will be the same in this case

  
• allan Posts: 63,498Questions: 1Answers: 10,470 Site admin

  August 15

  DataTable.Buttons.defaults.dom.container.className = 'dt-buttons is-grouped';
  

  somewhere before you initialise the DataTable.

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

  August 15

  Thanks Allan, it's obvious when I see it !

  Is it a way I can add a class to nav.pagination because Bulma navigation buttons are so big

  I did it this way and it doesn't always work

  Object.assign(DataTable.defaults, {
      language: { url: 'js/datatables/fr-FR.json'},
      lengthMenu: [5, 10, 25, 50, 100, { label: 'Tout', value: -1 }],
      pageLength: 25,
      caption: '<span class="font85rem has-text-grey">Cliquer sur la ligne ou sur le <span class="mx-1">&#9654;</span> pour afficher des informations complémentaires</span>',
      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');
      },
  });
  

  I'm changing the datatable JS file (adding is-small) but I would prefer add a change in my own preferences so the original files stay as they are

  <nav class="pagination is-small" role="navigation" aria-label="pagination">