自定义 DataTable 按钮的外观

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>[e-mail]</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>

- Quiel Cuevas

---

那么这些按钮生成的实际HTML是什么？ - user3559349

图片无关紧要。您需要展示其中一个按钮所生成的实际HTML代码。 - user3559349

我已经添加了生成的HTML代码。 - Quiel Cuevas

你不应该编辑插件的CSS文件。你应该创建自己的CSS文件，添加额外的样式规则。 - user3559349

你的css文件需要在插件的css文件之后加载。 - user3559349

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

});

使用 Bootstrap 图标和样式：

• http://getbootstrap.com/components/

- Eric Martinez

---

如何将 className: 'btn btn-primary glyphicon glyphicon-print' 更改为 className: 'btn btn-warning glyphicon glyphicon-print' 以更改按钮颜色？ - Massimo D. N.

这会添加指定的类，但不会删除“dt-button”类，因此样式不会更改为Bootstrap类样式。 - viking

Answer 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');

        }
    });

- Amin Arjmand

Answer 3

我没有在这里看到答案。我使用了 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">

- Zeghra

Answer 4

你所有的“按钮”都有一个名为.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/stackoverflow.jpg' style='width:30px;height:30px;' />"
        $(this).append(image);
    }
});

- Denys Wessels

Answer 5

您可以为按钮样式现有的类.buttons-{name}。这是一个Excel按钮的示例：

.buttons-excel {
  left: 10%;
  background-color: aqua;
}

- CLUTCHER

Answer 6

使用jQuery设置按钮宽度，可以像这样调用：

           $('#tabela_trab').DataTable( {
            "paging":   false,
            dom: 'Bfrtip',
            buttons: [
                'copyHtml5',
                'excelHtml5',
                'csvHtml5',
                'pdfHtml5'
            ]                 
        } );
      $(".buttons-html5").addClass("btn");
      $(".buttons-html5").addClass("btn-success");

- Bruno Serrano

Answer 7

$('#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');
  },
});

- user13532474