非レンダリングのDataTableエクスポートボタンを解決するにはどうすればよいですか？

Question

私は既存のDataTableにguide on adding file exportbuttonsをフォローしています。

しかし、私がASPソリューションを実行すると、エクスポートボタンは期待通りに機能しますが、正しく表示されず、ボタンのテキストのみが表示されます。

上記のリンクされたガイドの設定を反映するスクリプト参照の順序を再確認しました。

質問：

のDataTableのボタンをレンダリングするために、スクリプトの正しい順序とは何ですか？彼らは、実行時にどのように見えるか

：

彼らはどのようなものか：

スクリプトとHTML（要旨）：

@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

てみてくださいを追加する：このパラメータHereについて

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

詳細情報は、それが役に立てば幸い！

更新： Datatables download builderを使用し、ボタン拡張を含めることができます。関連するCSS（ビルダーがそれを含むと仮定しています）を含めるようにしてください。ちょうどの場合、This is the minified version of the buttons css