自定义 DataTable 按钮的外观
Posted
技术标签:
【中文标题】自定义 DataTable 按钮的外观【英文标题】：Customizing the appearance of DataTable button 【发布时间】：2016-09-25 05:19:27 【问题描述】：大家好。
我最近正在使用 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>
【问题讨论】：
使用 css 将其设置为您想要的样式。 感谢您的遵守。但是我如何引用 CSS 上的按钮，因为它是使用 jquery 创建的？对不起noobness 您需要展示您的代码 - 您是如何生成按钮的以及生成的 html 是什么。 （例如，您可以给按钮一个类名，或者使用#mytable td button // add style rules 选择它们）
我已经包含了我的代码。
这些按钮之一生成的实际 html 是什么？
【参考方案1】：
类名属性更容易使用
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'
]
);
使用引导图标和样式：
http://getbootstrap.com/components/【讨论】：
如何将className: 'btn btn-primary glyphicon glyphicon-print'改成className: 'btn btn-warning glyphicon glyphicon-print'来改变按钮颜色？
这会添加指定的类，但不会删除dt-button 类，因此样式不会更改为引导类样式。【参考方案2】：
您可以在这段代码中使用 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】：您所有的“按钮”都有一个名为 .dt-button 的样式规则，您可以使用一些 jQuery 来遍历所有具有此样式规则的元素，如果它们满足特定条件，则将图像附加到它们：
$('.dt-button').each(function (i, obj)
var h4 = $(this).find("h4");
var text = $(h4).text().trim();
if (text == "New")
var image = "<img src='http://www.skrenta.com/images/***.jpg' style='width:30px;height:30px;' />"
$(this).append(image);
);
【讨论】：
【参考方案4】：我没有在这里看到答案。我使用了 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">
【讨论】：
【参考方案5】：宽度 Jquery，在你调用按钮之后。 像这样的：
$('#tabela_trab').DataTable(
"paging": false,
dom: 'Bfrtip',
buttons: [
'copyHtml5',
'excelHtml5',
'csvHtml5',
'pdfHtml5'
]
);
$(".buttons-html5").addClass("btn");
$(".buttons-html5").addClass("btn-success");
【讨论】：
【参考方案6】：$('#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');
,
);
【讨论】：
【参考方案7】：您可以为按钮设置现有类.buttons-name 的样式。这是 excel 按钮的示例：
.buttons-excel
left: 10%;
background-color: aqua;
【讨论】：
以上是关于自定义 DataTable 按钮的外观的主要内容，如果未能解决你的问题，请参考以下文章
jQuery DataTable 自定义按钮正则表达式列搜索