如何删除 dataTables 按钮的默认按钮类? [英] How can I remove default button class of a dataTables button?

问题描述

我正在使用带有 Button 的数据表.我想显示成功按钮而不是默认.我试过这个代码

I am using Data table with Button. I want to show Success button rather default. I tried this Code

buttons: [
{
extend: "excel",
className: "btn-sm btn-success",
titleAttr: 'Export in Excel',
text: 'Excel'
}]

此代码正在运行，但这是添加 btn-success 类，但我想先删除 btn-default 类，然后添加成功类.

This code is working but this is adding btn-success class, But I want to remove the btn-default class first and then add the success class.

当前类:"btn btn-default buttons-excel buttons-html5 btn-sm btn-success"

我想要的:btn 按钮-excel 按钮-html5 btn-sm btn-success"

推荐答案

是的，这真的很烦人.不使用 bootstrap 也是一样，即使你声明了 className，也总是添加 .dt-button.有一个 init 可以用来修改例如类的回调:

Yes, this can be really annoying. It is the same without using bootstrap, where .dt-button always is added even if you declare className. There is a init callback you can use to modify for example classes :

$('#example').DataTable( {
  dom: 'Bfrtip',
  buttons: [{
    extend: "excel",
    className: "btn-sm btn-success",
    titleAttr: 'Export in Excel',
    text: 'Excel',
    init: function(api, node, config) {
       $(node).removeClass('btn-default')
    }
  }]
});

演示 -> https://jsfiddle.net/m6hysypd/

demo -> https://jsfiddle.net/m6hysypd/

更新:在这方面收到了很多赞成票，但正确或最好答案实际上是DavidDomains"的答案下面.使用

Update: Have received a lot of upvotes on this, but the correct or best answer is actually "DavidDomains"'s answer below. Use

buttons: {
  dom: {
    button: {
      className: ''
    }
  },
  buttons: [{
    //here comes your button definitions
  }]
}

这篇关于如何删除 dataTables 按钮的默认按钮类?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！