jquery - 自定义数据表按钮的外观

Question

大家好。

我最近正在使用 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>

Answer 1

使用 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' }
]

});

使用引导图标和样式:

• http://getbootstrap.com/components/