导出数据表中的数据

Question

我正在为我的项目使用数据表插件。我使用“数据表”而不是“数据表”，因为我使用的 .fnFilter 函数会在“数据表”中引发错误。但目前我正在尝试以不同格式导出我的表格数据，如 csv、excel、pdf 等。我正在使用以下代码

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

但是导出按钮的选项没有显示为按钮。相反，它显示为链接。谁能建议我如何按预期获得输出？

包含的文件有：

<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)，然后单击最左侧的按钮（元素选择器），单击其中一个链接（应该是按钮的链接）。在右侧的开发工具窗口中，它将显示哪些样式表正在应用哪些样式。