Answers

• kthorngren Posts: 21,449Questions: 26Answers: 4,974

  February 22 edited February 22 Answer ✓

  Use initComplete to add the classname using jQuery or Javascript. Updated example:
  https://live.datatables.net/cesuqure/1/edit

    initComplete: function () {
      $('div.dt-search input').addClass('testClass')
    }
  

  Kevin
• kthorngren Posts: 21,449Questions: 26Answers: 4,974

  February 22 edited February 22

  You may also be interested in this thread. Updated example using that technique:
  https://live.datatables.net/picawuhu/1/edit

  div.dt-container div.dt-layout-cell.dt-end input {
    background-color: lightblue !important;
  }
  

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

  February 23

  Thanks Kevin,

  I know how to do it with CSS.

  I was was wondering if I could put it inside the layout options because I could choose easily the class « case by case » and not apply the same style for all the datatables.
• MelodyNelson Posts: 213Questions: 33Answers: 2

  February 23

  I choose a compromise to have a look alike BULMA, I didn't change the CSS but did only this :

  layout: {
          topStart: 'pageLength',
          topEnd: {
              search: {
                  text: '_INPUT_',
                  placeholder: 'Rechercher dans la liste'
              },
          },          
          bottomStart: 'info',
          bottomEnd: 'paging'
      },
  initComplete: function () {
          $('div.dt-search input').addClass('input is-rounded is-small maxw300');
          $('div.dt-search input').removeClass('dt-input');
          $('div.dt-search').removeClass('dt-search');
      }
  

  

  Without the BULMA classes, it was really small and compact :

  
• kthorngren Posts: 21,449Questions: 26Answers: 4,974

  February 23

  Looking at the new Features docs I don't see any options to apply class names to the search feature.

  Hopefully the dt-input and dt-search classes are used only for styling. @allan can comment if removing those will affect anything else.

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

  February 23

  (I've lost my post... starting again)

  I'm using BULMA on the website, so I've change DT standard for DT with BULMA styles to give it a try.

  Since my last message, the initComplete is different (I don't change anymore dt-inputand dt-search and I'm changing other things) :

  initComplete: function () {
          $('nav.pagination').addClass('is-small');
          $('div.dtsp-panesContainer button').addClass('is-small');
      }
  

  Maybe it's « less dangerous » like that but I think I should use something else because I'm losing the added CSS when I'm changing page. Or could it be a bug ?
• allan Posts: 63,689Questions: 1Answers: 10,500 Site admin

  February 23 Answer ✓

  You can set the class name to be used for the input in the search feature with the static DataTable.ext.classes.search.input property:

  DataTable.ext.classes.search.input =
    'input is-rounded is-small maxw300';
  
  var table = new DataTable('#example');
  

  For the Bulma integration, I've got it set to be input. Is it just that you want to add the extra classes, or is that expected in a Bulma site?

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

  February 23

  Hi Allan,

  Thanks for the tip about the class, I will explore the files

  If I can play with classes, it's OK for me.

  About what is expected, I can't answer for « BULMA », the INPUT is the simple way.
  You can have more options if you want to add icons for example but it's a few more HTML tags to add :
  https://bulma.io/documentation/form/general/#with-icons

  I don't know if I answered your question correctly because of my « lack of English »
• MelodyNelson Posts: 213Questions: 33Answers: 2

  February 23

  If you have any clue to add a class for the nav pagination BULMA.
  I want to add « is-small » after the class « pagination ».
  I did it in the JS file but I don't like changing the DT files.

  DataTable.ext.renderer.pagingContainer.bulma = function (settings, buttonEls) {
      var nav = $('<nav class="pagination" role="navigation" aria-label="pagination"><ul class="pagination-list"></ul></nav>');
  

  If I'm doing it like that, the second class (is-small) is here when the table is loaded but disappear when I'm changing page :

  initComplete: function () {
          $('nav.pagination').addClass('is-small');
          $('div.dtsp-panesContainer button').addClass('is-small');
      }
  

  Thank you
• kthorngren Posts: 21,449Questions: 26Answers: 4,974

  February 23 Answer ✓

  You might need to use the page event or draw event to reapply the classes.

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

  February 25

  Thanks Kevin.

  It didn't find how to use the page Event to try it in this code, but the draw callback works fine (I use it to share common settings for all the tables on the website).

  Object.assign(DataTable.defaults, {
      language: { url: '//cdn.datatables.net/plug-ins/2.0.0/i18n/fr-FR.json' },
      lengthMenu: [10, 25, 50, 100, { label: 'Tout', value: -1 }],
      pageLength: 25,
      pagingType: 'numbers', // simple_numbers, full_numbers
  //  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-rounded is-small');
      },
  });
  
• kthorngren Posts: 21,449Questions: 26Answers: 4,974

  February 25

  Nice solution.

  Kevin