Wie behebt man nicht rendernde DataTable-Exportschaltflächen?

Question

Ich verfolge eine guide on adding file exportbuttons zu einer vorhandenen DataTable.

Aber wenn ich die ASP-Lösung ausführen, funktionieren die Exportschaltflächen wie erwartet, aber sie werden nicht korrekt dargestellt und zeigen nur den Text für die Schaltflächen an.

Ich habe die Reihenfolge der Skriptverweise überprüft, die die Einrichtung des oben verlinkten Handbuchs widerspiegeln.

Frage:

Was ist die richtige Reihenfolge von Skripten, um Datatable Tasten zu machen?

Was sie wie zur Laufzeit aussehen:

Was sollten sie wie folgt aussehen:

Scripts und HTML (GIST):

@model System.Data.DataTable 


<div class="container"> 
    <hr/> 



     <div class="form-group"> 

        <div class="table-responsive"> 
         <div class="table-responsive" id="datatable-wrapper"> 
          <style> 
           #escalation tr > *:nth-child(1) { 
            display: none; 
           } 
          </style> 
          <table id="escalation" class="table table-striped table-bordered" cellspacing="0" width="100%"> 
           <thead> 
            <tr> 
             @foreach (System.Data.DataColumn col in Model.Columns) 
             { 
              <th style="font-size: 12px; border-right: 1px solid #7591ac; ">@col.Caption</th> 
             } 
             <th style="font-size: 12px; border-right: 1px solid #7591ac; ">Details</th> 
             <th style="font-size: 12px; border-right: 1px solid #7591ac; ">Delete</th> 
            </tr> 
           </thead> 
           <tbody> 
            @foreach (System.Data.DataRow row in Model.Rows) 
            { 
             <tr> 
              @foreach (var cell in row.ItemArray) 
              { 
               <td style="font-size:11px">@cell.ToString()</td> 
              } 
              <td><button type="submit" style="background-color: #0CA281;" class="btn btn-success details">Details</button></td> 
              <td><button type="submit" class="btn btn-danger delete">Delete</button></td> 
             </tr> 
            } 
           </tbody> 
          </table> 
         </div> 
        </div> 
     </div> 
    </div> 



<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"> 
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script> 
<script src="https://cdn.datatables.net/1.10.10/js/jquery.dataTables.min.js"></script> 

<script src="https://cdn.datatables.net/buttons/1.2.1/js/buttons.flash.min.js"></script> 
<script src="https://cdn.datatables.net/buttons/1.2.1/css/buttons.dataTables.min.css"></script> 

<script src="https://cdn.datatables.net/buttons/1.2.1/js/dataTables.buttons.min.js"></script> 

<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/2.5.0/jszip.min.js"></script> 
<script src="https://cdn.rawgit.com/bpampuch/pdfmake/0.1.18/build/pdfmake.min.js"></script> 
<script src="https://cdn.rawgit.com/bpampuch/pdfmake/0.1.18/build/vfs_fonts.js"></script> 
<script src="https://cdn.datatables.net/buttons/1.2.1/js/buttons.html5.min.js"></script> 
<script src="https://cdn.datatables.net/buttons/1.2.1/js/buttons.print.min.js"></script> 


<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script> 

<script> 



    $(document).ready(function() { 



     var historyTable = $('#escalation').DataTable({ 
      "order": [[6, "desc"]], 
      buttons: [ 
      'copy', 'csv', 'excel', 'pdf', 'print' 
      ], 
      "sSwfPath": "../Content/dataTables/swf/copy_csv_xls.swf"   
     }); 

     historyTable.buttons().container() 
     .insertAfter('#datatable-wrapper'); 




    }); 
</script> 

Answer 1

Try Hinzufügen der DOM parameter:

order: [[6, "desc"]], 
dom: "Bfrtip", 
buttons: [ 
    'copy', 'csv', 'excel', 'pdf', 'print' 
] 

Mehr Informationen zu diesem Parameter Here, hoffen, es hilft!

Update: Sie könnten die Datatables download builder verwenden und die Tastenerweiterung enthalten. Stellen Sie nur sicher, dass Sie die relevanten CSS (ich nehme an, dass der Builder es enthält). Nur für den Fall, This is the minified version of the buttons css