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

Question

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

这是它的脚本：

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

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

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

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

Answer 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/