如何解決非呈現數據表導出按鈕？

Question

我正在關注guide on adding file exportbuttons到現有的DataTable。

但是，當我運行asp解決方案時，導出按鈕按預期工作，但它們無法正確呈現，只顯示按鈕的文本。

我重新檢查了腳本引用的順序，這些腳本引用映射了上面鏈接的指南的設置。

問：

什麼是爲了腳本的正確順序來呈現數據表按鈕？

他們的樣子在運行時：

他們應該是什麼樣子：

腳本和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

嘗試加入DOM parameter：

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

有關此參數的更多信息Here，希望它有幫助！

更新： 您可以使用Datatables download builder幷包含按鈕擴展名。只要確保你包含相關的CSS（我假設生成器包含它）。以防萬一，This is the minified version of the buttons css