Jquery DataTable：用相同位置的图标替换按钮答案

【问题标题】：Jquery DataTable : Replacing the buttons with icons at the same locationJquery DataTable：用相同位置的图标替换按钮
【发布时间】：2017-04-18 23:28:38
【问题描述】：

我在数据表中添加了默认 Excel 按钮。

这是它的脚本：

$('#searchResult').DataTable(
     {
         "dom": '<"top"lB>rt<"bottom"ip>',
         buttons: [
         {
             extend: 'excel',
             exportOptions:
             {
                 columns: ':visible'
             }
         },
        'colvis']
)}

我已通过以下 css 将按钮放在数据表上方的最右侧（顶部）：

.dataTables_wrapper .dt-buttons {
  float:right; 
}

但我不知道如何在保持相同功能的同时用图标替换按钮（以改进 UI）。以及如何在与按钮完全相同的位置插入图标？？

【问题讨论】：

标签： javascript jquery css datatable datatables

【解决方案1】：

每个按钮都丰富了一个独特的类 - .buttons-excel 等，因此您可以非常轻松地将某个按钮的内部内容与其他内容交换。在initComplete() 回调中执行此操作。 “图标”可以是很多东西，这里以Font Awesome 为例：

$('#example').DataTable( {
  //...   
  initComplete: function() {
   $('.buttons-copy').html('<i class="fa fa-copy" />')
   $('.buttons-csv').html('<i class="fa fa-file-text-o" />')
   $('.buttons-excel').html('<i class="fa fa-file-excel-o" />')
   $('.buttons-pdf').html('<i class="fa fa-file-pdf-o" />')
   $('.buttons-print').html('<i class="fa fa-print" />')
  }

} );

产生类似这样的东西：

演示 -> https://jsfiddle.net/6639xcj4/

【讨论】：

谢谢@davidkonrad。不过有一个问题-假设我想更改图标元素的背景颜色，那么我将如何使用上面的代码。
@Mr.SK，在 CSS 目标 .btn-default -> jsfiddle.net/6639xcj4/2 很想设置 i .fa 的样式，但它是我们想要设置样式的按钮。
哦，好的。明白了。感谢您的帮助@davidkonrad
@Mr.SK，重要愚蠢的我。必须撤回我上面的评论 :( 你必须以 .buttons-html5 为目标。我错误地指的是引导程序 .btn-default 类，但这也会改变所有其他按钮。我很抱歉错误。查看更新的小提琴 -> jsfiddle.net/6639xcj4/5

【解决方案2】：

您可以使用buttons.buttons.text 选项在按钮中显示图标而不是常规文本。另请注意，buttons.buttons.titleAttr 选项用于为按钮指定工具提示标题，这可以提高可访问性，让用户知道将鼠标悬停在按钮上时按钮的作用。

$(document).ready(function() {
    $('#example').DataTable( {
        dom: 'Bfrtip',
        buttons: [
            {
                extend:    'copyHtml5',
                text:      '<i class="fa fa-files-o"></i>',
                titleAttr: 'Copy'
            },
            {
                extend:    'excelHtml5',
                text:      '<i class="fa fa-file-excel-o"></i>',
                titleAttr: 'Excel'
            },
            {
                extend:    'csvHtml5',
                text:      '<i class="fa fa-file-text-o"></i>',
                titleAttr: 'CSV'
            },
            {
                extend:    'pdfHtml5',
                text:      '<i class="fa fa-file-pdf-o"></i>',
                titleAttr: 'PDF'
            }
        ]
    } );
} );

Demo

【讨论】：