Datatables custom button appearance

3ncor3

Hi,

I tried to change the custom button color (based on bootstrap class) and the button tag (from <a> to <button>) but code below is not working.

I know the default button structure is like this :

<a class="dt-button">...</a>

but I want the tag to be like this :

<button>My Custom Button</button>

Here is my code but nothing happen to the button (tag not change, class also not applied).

$('#akaunTable').DataTable( {
    dom:'lBtipr',   
    buttons:[{
        text:"Register new",
        action:function(e, dt, node, config){
            //trigger the bootstrap modal               
        },
        dom:{
            button:{
                tag:"button",
                className:"btn btn-primary"
            },
            buttonLiner: {
                tag: null
            }
        }
    }]
});

Any help is appreciated. Thank you.

allan

The dom option should not be in the buttons array. You want to use:

$("#akaunTable").DataTable({
  dom: "lBtipr",
  buttons: {
    buttons: [
      {
        text: "Register new",
        action: function(e, dt, node, config) {
          //trigger the bootstrap modal
        }
      }
    ],
    dom: {
      button: {
        tag: "button",
        className: "btn btn-primary"
      },
      buttonLiner: {
        tag: null
      }
    }
  }
});

Allan

3ncor3

Perfect!

Thanks Allan!