twitter-bootstrap 如何删除 dataTables 按钮的默认按钮类？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/45299188/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How can I remove default button class of a dataTables button?
提问by ansh
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'
}]
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-success 类，但我想先删除 btn-default 类，然后添加成功类。
Current Classes: "btn btn-default buttons-excel buttons-html5 btn-sm btn-success"
当前课程： "btn btn-default buttons-excel buttons-html5 btn-sm btn-success"
What I want : "btn buttons-excel buttons-html5 btn-sm btn-success"
我想要的是 ： "btn buttons-excel buttons-html5 btn-sm btn-success"
回答by davidkonrad
Yes, this can be really annoying. It is the same without using bootstrap, where .dt-buttonalways is added even if you declare className. There is a initcallback you can use to modify for example classes :
是的，这真的很烦人。不使用引导程序.dt-button也是如此，即使您声明className. 有一个init回调可以用来修改例如类：
$('#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')
}
}]
});
demo -> https://jsfiddle.net/m6hysypd/
演示 -> https://jsfiddle.net/m6hysypd/
Update: Have received a lot of upvotes on this, but the corrector bestanswer is actually "DavidDomains"'s answer below. Use
更新：已收到关于这个很多upvotes的，但正确的或最好的答案居然是“DavidDomains”的回答如下。利用
buttons: {
dom: {
button: {
className: ''
}
},
buttons: [{
//here comes your button definitions
}]
}
回答by DavidDomain
You should take a look at the buttons.dom.buttonoption.
你应该看看这个buttons.dom.button选项。
This option controls the HTML tag that is used to create each individual button. With this option the tag type and class name can be specified using the tag and className properties of this object.
此选项控制用于创建每个单独按钮的 HTML 标记。使用此选项，可以使用此对象的 tag 和 className 属性指定标记类型和类名。
This will give you total control on how the button will be rendered in the DOM. No need to remove any classes afterwards.
这将使您完全控制按钮在 DOM 中的呈现方式。之后无需删除任何类。
Here is an example.
这是一个例子。
$('#example').DataTable( {
dom: 'Bfrtip',
buttons: {
dom: {
button: {
tag: 'button',
className: ''
}
},
buttons: [{
extend: 'excel',
className: 'btn btn-sm btn-success',
titleAttr: 'Excel export.',
text: 'Excel',
filename: 'excel-export',
extension: '.xlsx'
}, {
extend: 'copy',
className: 'btn btn-sm btn-primary',
titleAttr: 'Copy table data.',
text: 'Copy'
}]
}
});<link href="https://cdn.datatables.net/v/bs-3.3.7/jszip-3.1.3/pdfmake-0.1.27/dt-1.10.15/b-1.3.1/b-html5-1.3.1/b-print-1.3.1/datatables.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/v/bs-3.3.7/jszip-3.1.3/pdfmake-0.1.27/dt-1.10.15/b-1.3.1/b-html5-1.3.1/b-print-1.3.1/datatables.min.js"></script>
<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>0,800</td>
</tr>
<tr>
<td>Garrett Winters</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>63</td>
<td>2011/07/25</td>
<td>0,750</td>
</tr>
<tr>
<td>Ashton Cox</td>
<td>Junior Technical Author</td>
<td>San Francisco</td>
<td>66</td>
<td>2009/01/12</td>
<td>,000</td>
</tr>
<tr>
<td>Cedric Kelly</td>
<td>Senior Javascript Developer</td>
<td>Edinburgh</td>
<td>22</td>
<td>2012/03/29</td>
<td>3,060</td>
</tr>
<tr>
<td>Airi Satou</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>33</td>
<td>2008/11/28</td>
<td>2,700</td>
</tr>
</tbody>
</table>回答by Stefan
回答by Hannan Awan
Maybe this can help
也许这可以帮助
$('.dt-button').attr("class","btn-success");
Add this to jquery after loading Datatables
加载数据表后将此添加到 jquery
Or you can make your own css class and mark the require attributes as !important to override the default style
或者您可以创建自己的 css 类并将 require 属性标记为 !important 以覆盖默认样式
回答by pawan kumar
Use this code to hide Excel text on button:
使用此代码隐藏按钮上的 Excel 文本：
extend: 'excel',
text: '',
className: "btn btn-info btn-sm glyphicon glyphicon-list-alt",
