大家好日子。
我最近使用ASP.Net（MVC 4）处理了一个Web应用程序，发现了一个非常令人印象深刻的HTML表，它使用了Datatable。
我能够使用所述表格的搜索元素内联创建默认按钮，但我的问题是它们的外观很简单，我一直在阅读它的文档，但我无法找到一种方法来改变它们的外观，特别是它们的背景 - 图像。
提前致谢
这是我的表格代码。
<table id="exampledatatable" class="table table-striped table-bordered dt-responsive nowrap" cellspacing="0" >
<thead>
<tr>
<th>Customer Code</th>
<th>Customer Name</th>
<th>Customer Type</th>
<th>Industry Type</th>
<th>Website</th>
<th>Email</th>
<th>Off Day 1</th>
<th>Off Day 2</th>
<th>E-mail</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tiger</td>
<td>Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
<td>5421</td>
<td>t.nixon@datatables.net</td>
<td>
@Html.ActionLink("Edit", "UpdateCompany") |
@Html.ActionLink("Delete", "DeleteCompany") |
@Html.ActionLink("Restore", "RestoreCompany")
</td>
</tr>
</tbody>
</table>
这是我生成按钮的代码
<script>
$(document).ready(function () {
$('#exampledatatable').DataTable({
dom: 'Bfrtip',
buttons: [
{
extend: 'copyHtml5',
text: '<h4 style="font-size: 13px;"><i class="fa fa- plus-circle fa-x5"></i> New</h4>',
titleAttr: 'Create New Record'
},
{
extend: 'csvHtml5',
text: '<h4 style="font-size: 13px;"><i class="fa fa-pencil fa-x5"></i> Edit</h4>',
titleAttr: 'Edit Existing Record'
},
{
extend: 'csvHtml5',
text: '<h4 style="font-size: 13px;"><i class="fa fa-trash fa-x5"></i> Delete</h4>',
titleAttr: 'Delete Existing Record'
},
{
extend: 'pdfHtml5',
text: '<h4 style="font-size: 13px;"><i class="fa fa-reply-all fa-x5"></i> Restore</h4>',
titleAttr: 'Restore Deleted Record'
},
{
extend: 'pdfHtml5',
text: '<h4 style="font-size: 13px;"><i class="fa fa-refresh fa-x5"></i> Refresh</h4>',
titleAttr: 'Restore Deleted Record'
},
{
extend: 'pdfHtml5',
text: '<h4 style="font-size: 13px;"><i class="fa fa-print fa-x5"></i> Print</h4>',
titleAttr: 'Restore Deleted Record'
},
{
extend: 'pdfHtml5',
text: '<h4 style="font-size: 13px;"><i class="fa fa-times-circle fa-x5"></i> Close</h4>',
titleAttr: 'Restore Deleted Record'
}
]
});
});
</script>
以下是生成的HTML代码：
<div class="dt-buttons">
<a class="dt-button buttons-copy buttons-html5" tabindex="0" aria-controls="exampledatatable" href="#" title="Create New Record">
<span>
<h4 style="font-size: 13px;"><i class="fa fa-plus-circle fa-x5"></i> New</h4>
</span>
</a>
<a class="dt-button buttons-csv buttons-html5" tabindex="0" aria-controls="exampledatatable" href="#" title="Edit Existing Record">
<span>
<h4 style="font-size: 13px;"><i class="fa fa-pencil fa-x5"></i> Edit</h4>
</span>
</a>
<a class="dt-button buttons-csv buttons-html5" tabindex="0" aria-controls="exampledatatable" href="#" title="Delete Existing Record">
<span>
<h4 style="font-size: 13px;"><i class="fa fa-trash fa-x5"></i> Delete</h4>
</span>
</a>
<a class="dt-button buttons-pdf buttons-html5" tabindex="0" aria-controls="exampledatatable" href="#" title="Restore Deleted Record">
<span>
<h4 style="font-size: 13px;"><i class="fa fa-reply-all fa-x5"></i> Restore</h4>
</span>
</a>
<a class="dt-button buttons-pdf buttons-html5" tabindex="0" aria-controls="exampledatatable" href="#" title="Restore Deleted Record">
<span>
<h4 style="font-size: 13px;"><i class="fa fa-refresh fa-x5"></i> Refresh</h4>
</span>
</a>
<a class="dt-button buttons-pdf buttons-html5" tabindex="0" aria-controls="exampledatatable" href="#" title="Restore Deleted Record">
<span>
<h4 style="font-size: 13px;"><i class="fa fa-print fa-x5"></i> Print</h4>
</span>
</a>
<a class="dt-button buttons-pdf buttons-html5" tabindex="0" aria-controls="exampledatatable" href="#" title="Restore Deleted Record">
<span>
<h4 style="font-size: 13px;"><i class="fa fa-times-circle fa-x5"></i> Close</h4>
</span>
</a>
答案 0 :(得分：9)
使用classname属性
更容易https://datatables.net/reference/option/buttons.buttons.className
示例：
$('#table2excel').DataTable({
paging: false,
"info": false,
searching: false,
dom: 'Bfrtip',
buttons: [
{ extend: 'copy', className: 'btn btn-primary glyphicon glyphicon-duplicate' },
{ extend: 'csv', className: 'btn btn-primary glyphicon glyphicon-save-file' },
{ extend: 'excel', className: 'btn btn-primary glyphicon glyphicon-list-alt' },
{ extend: 'pdf', className: 'btn btn-primary glyphicon glyphicon-file' },
{ extend: 'print', className: 'btn btn-primary glyphicon glyphicon-print' }
]
}）;
使用引导图标和样式：
答案 1 :(得分：1)
所有“按钮”都有一个名为。QSharedData的样式规则，您可以使用一些jQuery循环遍历具有此样式规则的所有元素，如果它们满足特定条件，则向它们附加图像：
dt-button答案 2 :(得分：0)
您可以将jquery与以下代码配合使用：
$('#myTable').DataTable({
responsive: true,
dom: 'lBfrtip',
buttons: ['print', 'copyHtml5', 'excelHtml5', 'csvHtml5', 'pdfHtml5'],
initComplete: function () {
var btns = $('.dt-button');
btns.addClass('btn btn-success btn-sm');
btns.removeClass('dt-button');
}
});
答案 3 :(得分：0)
宽度Jquery，在调用按钮之后。 像这样：
$('#tabela_trab').DataTable( {
"paging": false,
dom: 'Bfrtip',
buttons: [
'copyHtml5',
'excelHtml5',
'csvHtml5',
'pdfHtml5'
]
} );
$(".buttons-html5").addClass("btn");
$(".buttons-html5").addClass("btn-success");
答案 4 :(得分：0)
$('#example').DataTable({
dom: 'Bfrtip',
buttons: [{
"extend": 'excel',
"text": 'Exportar Excel',
'className': 'btn btn-success'
},
{
"extend": 'print',
"text": 'Imprimir',
'className': 'btn btn-info'
}
],
initComplete: function() {
var btns = $('.dt-button');
btns.removeClass('dt-button');
},
});
答案 5 :(得分：0)
我在这里没有找到答案。我使用了Font Awesome（4.7）：
var table = $(#myTable).DataTable({
dom: 'Bfrtip',
buttons: [{
text: '<i class="fa fa-plus-circle" aria-hidden="true"></i> New',
className: 'btn btn-success'
}],
initComplete: function() {
var btns = $('.dt-button');
btns.removeClass('dt-button');
},
})
并链接
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
答案 6 :(得分：0)
您可以为按钮设置现有类 .buttons-{name} 的样式。这是excel按钮的示例：
.buttons-excel {
left: 10%;
background-color: aqua;
}