javascript - Jquery 数据表 : Replacing the buttons with icons at the same location

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/