Answers

• kthorngren Posts: 21,900Questions: 26Answers: 5,060

  April 4

  Looks like btn-secondary is added to that button. One option is to use ready() to remove btn-secondary from the button:

    oTable.ready(function () {
      oTable.button(1, 0).node().removeClass('btn-secondary');
    });
  

  https://live.datatables.net/mohuvuji/2/edit

  Kevin
• slolo Posts: 71Questions: 14Answers: 1

  April 5

  Hello @kthorngren,

  Thanks for your answer.
  It works but it is not a nice solution (it makes the button flashing).

  I think it could be nicer to have a way to do it like the "dom" option for "buttons".
• allan Posts: 64,285Questions: 1Answers: 10,614 Site admin

  April 7 Answer ✓

  I wanted to know if it was possible to change the style of a button (Bootstrap 4) for buttons that are not part of the default "buttons" group as can be done via the "dom" option.

  You've already got the answer in your example I think . You use:

      "buttons" : {
        //////////
        "dom": {
          "button": {
            "className": "btn"
          }
        //////////
        },
        "buttons": [
          {
            "extend": "copyHtml5",
      ...
  

  Just do the same for the second instance:

          "buttons": {
            "dom": {
              "button": {
                "className": "btn"
              }
            },
            buttons: [
              {
                "extend" : "searchBuilder",
                "className" : "btn-outline-secondary",
                "config": {
                  "greyscale" : true
                }
              }
            ]
          }
  

  I think setting the default is a nicer way of doing it if you are going to need that for all of the instances on the page, but that's how it is done.

  The key thing to know here is that:

  buttons: [ /* button defaults */ ]
  

  is just short hand for:

  buttons: {
    buttons: [ /* button defaults */ ]
  }
  

  Allan
• slolo Posts: 71Questions: 14Answers: 1

  April 7

  Hi @allan,

  Thanks a lot for your answer.

  I did what you told me like below and it works like a charm

  "bottom1Start" : {
      "buttons" : {
           "dom" : {
              "button": {
                  "className": "btn"
              }
          },
          "buttons" : [
              {
                  "extend" : "searchBuilder",
                  "className" : "btn-outline-secondary",
                  "config": {
                      "greyscale" : true
                  }
              }
          ]
      }
  },
  

  DataTables component is so customisable that is sometime a bit quite hard to find the way to do what we need.
  But there is almost always a way to do what you want and that's great!

  I think setting the default is a nicer way of doing it if you are going to need that for all of the instances on the page,
  I guess you're probably right and in the end it's simpler with the global setting.

  But I'm glad to know the other possibility.
• allan Posts: 64,285Questions: 1Answers: 10,614 Site admin

  April 7

  Yeah - there are a ton of options! I frequently use the docs to check the methods and options myself as well

  Allan