CODEWITHSUNDEEP
jqueryasp.netasp.net-mvc-4datatables
Quiel Cuevas
Quiel Cuevas

Reputation: 159

Customizing the appearance of DataTable button

Good day everyone.

I'm recently working with a web application using ASP.Net (MVC 4) and found a pretty impressive kind of HTML table which is by using Datatable.

I'm able to create default buttons inline with the search element of the said table but my problem is their appearance it very simple and I've been reading it's documentation but i cant find a way to change their appearance specifically their background-image.

Thanks in advance

Here is my code for the Table.

    <table id="exampledatatable" class="table table-striped table-bordered dt-responsive nowrap" cellspacing="0" >
        <thead>
            <tr>
                <th>Customer Code</th>
                <th>Customer Name</th>
                <th>Customer Type</th>
                <th>Industry Type</th>
                <th>Website</th>
                <th>Email</th>
                <th>Off Day 1</th>
                <th>Off Day 2</th>
                <th>E-mail</th>
                <th>Actions</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Tiger</td>
                <td>Nixon</td>
                <td>System Architect</td>
                <td>Edinburgh</td>
                <td>61</td>
                <td>2011/04/25</td>
                <td>$320,800</td>
                <td>5421</td>
                <td>[email protected]</td>
                <td>
                    @Html.ActionLink("Edit", "UpdateCompany") |
                    @Html.ActionLink("Delete", "DeleteCompany") |
                    @Html.ActionLink("Restore", "RestoreCompany")
                </td>
            </tr>
       </tbody>
    </table>

And here is my code for generating it buttons

<script>

        $(document).ready(function () {
            $('#exampledatatable').DataTable({
                dom: 'Bfrtip',
                buttons: [
                    {
                        extend: 'copyHtml5',
                        text: '<h4 style="font-size: 13px;"><i class="fa fa-                                              plus-circle fa-x5"></i> New</h4>',
                        titleAttr: 'Create New Record'
                    },  
                    {
                        extend: 'csvHtml5',
                        text: '<h4 style="font-size: 13px;"><i class="fa fa-pencil fa-x5"></i> Edit</h4>',
                        titleAttr: 'Edit Existing Record'
                    },
                    {
                        extend: 'csvHtml5',
                        text: '<h4 style="font-size: 13px;"><i class="fa fa-trash fa-x5"></i> Delete</h4>',
                        titleAttr: 'Delete Existing Record'
                    },
                    {
                        extend: 'pdfHtml5',
                        text: '<h4 style="font-size: 13px;"><i class="fa fa-reply-all fa-x5"></i> Restore</h4>',
                        titleAttr: 'Restore Deleted Record'
                    },
                    {
                        extend: 'pdfHtml5',
                        text: '<h4 style="font-size: 13px;"><i class="fa fa-refresh fa-x5"></i> Refresh</h4>',
                        titleAttr: 'Restore Deleted Record'
                    },
                    {
                        extend: 'pdfHtml5',
                        text: '<h4 style="font-size: 13px;"><i class="fa fa-print fa-x5"></i> Print</h4>',
                        titleAttr: 'Restore Deleted Record'
                    },
                    {
                        extend: 'pdfHtml5',
                        text: '<h4 style="font-size: 13px;"><i class="fa fa-times-circle fa-x5"></i> Close</h4>',
                        titleAttr: 'Restore Deleted Record'
                    }
               ]
            });
        });
    </script>

Here is the generated HTML code:

<div class="dt-buttons">
<a class="dt-button buttons-copy buttons-html5" tabindex="0" aria-controls="exampledatatable" href="#" title="Create New Record">
    <span>
        <h4 style="font-size: 13px;"><i class="fa fa-plus-circle fa-x5"></i> New</h4>
    </span>
</a>
<a class="dt-button buttons-csv buttons-html5" tabindex="0" aria-controls="exampledatatable" href="#" title="Edit Existing Record">
    <span>
        <h4 style="font-size: 13px;"><i class="fa fa-pencil fa-x5"></i> Edit</h4>
    </span>
</a>
<a class="dt-button buttons-csv buttons-html5" tabindex="0" aria-controls="exampledatatable" href="#" title="Delete Existing Record">
    <span>
        <h4 style="font-size: 13px;"><i class="fa fa-trash fa-x5"></i> Delete</h4>
    </span>
</a>
<a class="dt-button buttons-pdf buttons-html5" tabindex="0" aria-controls="exampledatatable" href="#" title="Restore Deleted Record">
    <span>
        <h4 style="font-size: 13px;"><i class="fa fa-reply-all fa-x5"></i> Restore</h4>
    </span>
</a>
<a class="dt-button buttons-pdf buttons-html5" tabindex="0" aria-controls="exampledatatable" href="#" title="Restore Deleted Record">
    <span>
        <h4 style="font-size: 13px;"><i class="fa fa-refresh fa-x5"></i> Refresh</h4>
    </span>
</a>
<a class="dt-button buttons-pdf buttons-html5" tabindex="0" aria-controls="exampledatatable" href="#" title="Restore Deleted Record">
    <span>
        <h4 style="font-size: 13px;"><i class="fa fa-print fa-x5"></i> Print</h4>
    </span>
</a>
<a class="dt-button buttons-pdf buttons-html5" tabindex="0" aria-controls="exampledatatable" href="#" title="Restore Deleted Record">
    <span>
        <h4 style="font-size: 13px;"><i class="fa fa-times-circle fa-x5"></i> Close</h4>
    </span>
</a>

Upvotes: 7

Views: 41909

Answers (7)

Wes
Wes

Reputation: 1945

You can style the existing classes .buttons-{name} for the buttons. This is an example for the excel button:

.buttons-excel {
  left: 10%;
  background-color: aqua;
}

Upvotes: 0

Zeghra
Zeghra

Reputation: 477

I didn't see here as answer. I used Font Awesome (4.7):

  var table = $(#myTable).DataTable({
      dom: 'Bfrtip',
      buttons: [{
        text: '<i class="fa fa-plus-circle" aria-hidden="true"></i> New',
        className: 'btn btn-success'
      }],
      initComplete: function() { 
        var btns = $('.dt-button');
        btns.removeClass('dt-button');
      },
  })

And link

   <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">

Upvotes: 3

user13532474
user13532474

Reputation: 11

$('#example').DataTable({
  dom: 'Bfrtip',
  buttons: [{
      "extend": 'excel',
      "text": 'Exportar Excel',
      'className': 'btn btn-success'
    },
    {
      "extend": 'print',
      "text": 'Imprimir',
      'className': 'btn btn-info'
    }
  ],
  initComplete: function() {
    var btns = $('.dt-button');
    btns.removeClass('dt-button');
  },
});

Upvotes: 1

Bruno Serrano
Bruno Serrano

Reputation: 1

Width Jquery, After you call the buttons. Something like this:

           $('#tabela_trab').DataTable( {
            "paging":   false,
            dom: 'Bfrtip',
            buttons: [
                'copyHtml5',
                'excelHtml5',
                'csvHtml5',
                'pdfHtml5'
            ]                 
        } );
      $(".buttons-html5").addClass("btn");
      $(".buttons-html5").addClass("btn-success");

Upvotes: 0

Amin Arjmand
Amin Arjmand

Reputation: 455

You can use jquery with this code :

$('#myTable').DataTable({
        responsive: true,
        dom: 'lBfrtip',
        buttons: ['print', 'copyHtml5', 'excelHtml5', 'csvHtml5', 'pdfHtml5'],
        initComplete: function () {
            var btns = $('.dt-button');
            btns.addClass('btn btn-success btn-sm');
            btns.removeClass('dt-button');

        }
    });

Upvotes: 15

Eric Martinez
Eric Martinez

Reputation: 260

it's more easy to use the the classname attribute

https://datatables.net/reference/option/buttons.buttons.className

Example:

$('#table2excel').DataTable({
paging: false,
"info": false,
searching: false,
dom: 'Bfrtip',
buttons: [
    { extend: 'copy', className: 'btn btn-primary glyphicon glyphicon-duplicate' },
    { extend: 'csv', className: 'btn btn-primary glyphicon glyphicon-save-file' },
    { extend: 'excel', className: 'btn btn-primary glyphicon glyphicon-list-alt' },
    { extend: 'pdf', className: 'btn btn-primary glyphicon glyphicon-file' },
    { extend: 'print', className: 'btn btn-primary glyphicon glyphicon-print' }
]

});

using bootstrap icons and style:

Upvotes: 26

Denys Wessels
Denys Wessels

Reputation: 17049

All your "buttons" have a style rule called .dt-button you can use a bit of jQuery to loop through all the elements which have this style rule and if they meet a specific criteria append an image to them:

$('.dt-button').each(function (i, obj) {

    var h4 = $(this).find("h4");

    var text = $(h4).text().trim();

    if (text == "New") {
        var image = "<img src='http://www.skrenta.com/images/stackoverflow.jpg' style='width:30px;height:30px;' />"
        $(this).append(image);
    }
});

Upvotes: 1

Related Questions