データテーブル内のデータをエクスポート

Question

私は自分のプロジェクトにdatatableプラグインを使用しています。私は "Datatable"でエラーをスローする.fnFilter関数を使用しているので、 "Datatable"の代わりに "datatable"を使用します。しかし、現在、私は、コード

$(document).ready(function(){ 
    var table= $('#testTable').dataTable({ 
    dom: 'Bfrtip', 
    extend: 'collection', 
    text: 'Export', 
    buttons: [ 

     'copy', 'csv', 'excel', 'pdf', 'print' 
    ] 
    }); 


    $('#selectField').on('change', function() { 
    var selectedValue = $(this).val(); 
    table.fnFilter("^"+selectedValue+"$", 4, true); 
    }); 
    $('#selectField1').on('change', function() { 
    var selectedValue = $(this).val(); 
    table.fnFilter("^"+selectedValue+"$", 3, true); 
    }); 
    $('#selectField2').on('change',function(){ 
    var selectedValue = $(this).val(); 
    table.fnFilter("^"+selectedValue+"$", 5, true); //Exact value, column, reg 
    }); 
}); 

の下に使用しています。しかし、輸出ボタンのオプションがボタンとして表示されないCSVやExcel、PDFなどのような別の形式で私のテーブルのデータをエクスポートしようとしています。リンクとして表示されます。どのように私はどのように出力を期待どおりに得ることができますか？

含まれるファイルは、以下のとおりです。

<spring:url value="/resources/jquery-1.12.4.min.js" var="minJS" /> 
    <script src="${minJS}"></script> 
    <spring:url value="https://code.jquery.com/jquery-1.12.3.js" var="minJS1" /> 
    <script src="${minJS1}"></script> 
    <spring:url value="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" var="bootJS1" /> 
    <script src="${bootJS1}"></script> 
    <spring:url value="http://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js" var="datatable" /> 
    <script src="${datatable}"></script> 
    <spring:url value="http://cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css" var="datacss" /> 
     <link href="${datacss}" rel="stylesheet" /> 
     <spring:url value="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" var="BOOT" /> 
<link href="${BOOT}" rel="stylesheet" /> 
    <spring:url value="/resources/BIS.js" var="crunchifyJS" /> 
    <script src="${crunchifyJS}"></script> 
    <spring:url value="https://cdn.datatables.net/buttons/1.2.2/js/dataTables.buttons.min.js" var="buttonJS" /> 
    <script src="${buttonJS}"></script> 
    <spring:url value="https://cdn.datatables.net/buttons/1.2.2/js/buttons.flash.min.js" var="flashJS" /> 
    <script src="${flashJS}"></script> 
    <spring:url value="https://cdnjs.cloudflare.com/ajax/libs/jszip/2.5.0/jszip.min.js" var="zipJS" /> 
    <script src="${zipJS}"></script> 
    <spring:url value="https://cdn.rawgit.com/bpampuch/pdfmake/0.1.18/build/pdfmake.min.js" var="pdfJS" /> 
    <script src="${pdfJS}"></script> 
    <spring:url value="https://cdn.rawgit.com/bpampuch/pdfmake/0.1.18/build/vfs_fonts.js" var="fontJS" /> 
    <script src="${fontJS}"></script> 
    <spring:url value="https://cdn.datatables.net/buttons/1.2.2/js/buttons.html5.min.js" var="htmJS" /> 
    <script src="${htmJS}"></script> 
    <spring:url value="https://cdn.datatables.net/buttons/1.2.2/js/buttons.print.min.js" var="printJS" /> 
    <script src="${printJS}"></script> 
     <spring:url value="/resources/a.css" var="crunchifySS" /> 
<link href="${crunchifySS}" rel="stylesheet" /> 
    <spring:url value="https://cdn.datatables.net/buttons/1.2.2/css/buttons.dataTables.min.css" var="ButtonSS" /> 
<link href="${buttonSS}" rel="stylesheet" /> 

Answer 1

さて、正しいファイルがあるが、それはちょうどそれらの問題を把握するのは難しいように見えます。アプリを開いた状態で、Chromeをお勧めします。デベロッパーツール（F12）を開いて左端のボタン（要素セレクター）をクリックし、リンクの1つ（ボタンであると思われるもの）をクリックします。右側のdevツールウィンドウには、どのスタイルがどのスタイルシートによって適用されているかが表示されます。