Настройка внешнего вида кнопки DataTable

Question

Добрый день всем.

Я недавно работал с веб-приложением с использованием ASP.Net (MVC 4) и нашел довольно впечатляющий вид таблицы HTML, которая использует Datatable.

Я могу создать стандартные кнопки в строке с элементом поиска указанной таблицы, но моя проблема заключается в их внешнем виде, это очень просто, и я читал его документацию, но я не могу найти способ изменить их внешний вид, в частности, их изображение на заднем плане.

Заранее спасибо

Вот мой код таблицы.

<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>t.nixon@datatables.net</td> 
       <td> 
        @Html.ActionLink("Edit", "UpdateCompany") | 
        @Html.ActionLink("Delete", "DeleteCompany") | 
        @Html.ActionLink("Restore", "RestoreCompany") 
       </td> 
      </tr> 
     </tbody> 
    </table> 

А вот мой код для создания его кнопки

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

Вот сгенерированный HTML код:

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

Answer 1

Все ваши "кнопки" есть правило стиля называется . dt-button вы можете использовать немного JQuery для перебора всех элементов, которые имеют это правило стиля, и если они отвечают определенным критериям Append изображения к ним:

$('.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); 
    } 
}); 

Answer 2

это более простой в использовании атрибута имя класса

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

Пример:

$('#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' } 
] 

});

с помощью начальной загрузки иконки и стиль:

• http://getbootstrap.com/components/