CODEWITHSUNDEEP
javascriptjquerycssdatatabledatatables
Mr.Human
Mr.Human

Reputation: 617

Jquery DataTable : Replacing the buttons with icons at the same location

I have added the default Excel button in my datatable.

Here's the script for it : 

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

And I've placed the button at the extreme right(top-side) above the data-table through the following css:

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

But I have no idea about how can I replace the Buttons with icons ( to improve the UI) while maintaining the same functionality. And how can I insert the icons at the exact same location as of the buttons??

Upvotes: 2

Views: 9302

Answers (2)

Prashant Pokhriyal
Prashant Pokhriyal

Reputation: 3827

You can make use of buttons.buttons.text option to show an icon in the button instead of regular text. Note also that the buttons.buttons.titleAttr option is used to specify a tooltip title for the button, which can improve accessibility, letting users know what the button does when they hover their mouse over the button.

$(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

Upvotes: 1

davidkonrad
davidkonrad

Reputation: 85558

Each button is enriched with a unique class - .buttons-excel etc, so you can very easy swap the inner content of a certain button with something else. Do this in the initComplete() callback. "Icons" can be many things, here an example using 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" />')
  }

} );

produces something like this : enter image description here

demo -> https://jsfiddle.net/6639xcj4/

Upvotes: 7

Related Questions