如何解决非呈现数据表导出按钮？

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