Exportieren von Daten in Datentabelle

Question

Ich verwende Datatable-Plugin für mein Projekt. Ich verwende "Datatable" anstelle von "Datatable", weil ich die .fnFilter-Funktion verwende, die einen Fehler in "Datatable" auslöst. Aber zur Zeit versuche ich meine Tabellendaten in verschiedenen Formaten wie CSV zu exportieren, Excel, PDF etc. Ich Code unten bin mit

$(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 
    }); 
}); 

aber die Option für den Export Tasten erscheint nicht als Schaltflächen. Stattdessen erscheint es als Link. Kann mir jemand vorschlagen, wie ich die Ausgabe wie erwartet bekommen kann?

eingebundenen Dateien sind:

<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

Okay, sieht aus wie die richtigen Dateien gibt es, aber es ist schwierig, das Problem mit den gerade herauszufinden. Wenn die App geöffnet ist, empfehle ich Chrome, öffne die Entwickler-Tools (F12) und klicke dann auf die Schaltfläche ganz links (Element-Selektor), klicke auf einen der Links (diejenigen, die Buttons sein sollen). Im Fenster "dev tools" auf der rechten Seite sehen Sie, welche Stile von welchen Stylesheets angewendet werden.