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()回调中执行此操作。＆＃34;图标＆＃34;可以是很多东西，这里有一个使用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" />')
  }

} );

生成如下内容：

演示 - ＆gt;的 https://jsfiddle.net/6639xcj4/

Answer 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

Jquery DataTable：在同一位置用图标替换按钮

2 个答案: