导出按钮未出现在数据表中答案

【问题标题】：Export buttons are not appearing in Datatable导出按钮未出现在数据表中
【发布时间】：2015-09-11 10:12:57
【问题描述】：

我正在使用 jQuery DataTables 1.10，我的所有代码都运行良好。要添加导出功能，我参考this 链接。我已经添加了所说的所有文件

//code.jquery.com/jquery-1.11.3.min.js
https://cdn.datatables.net/1.10.9/js/jquery.dataTables.min.js
https://cdn.datatables.net/buttons/1.0.3/js/dataTables.buttons.min.js
//cdnjs.cloudflare.com/ajax/libs/jszip/2.5.0/jszip.min.js
//cdn.rawgit.com/bpampuch/pdfmake/0.1.18/build/pdfmake.min.js
//cdn.rawgit.com/bpampuch/pdfmake/0.1.18/build/vfs_fonts.js
//cdn.datatables.net/buttons/1.0.3/js/buttons.html5.min.js
//cdn.datatables.net/1.10.9/css/jquery.dataTables.min.css
//cdn.datatables.net/buttons/1.0.3/css/buttons.dataTables.min.css

我已下载这些文件并存储在本地。所以我的最终代码是这样的：

 table = $(".jqueryDataTable").DataTable( {

        "initComplete": function(oSettings, json) {
              alert( 'DataTables has finished its initialisation in table.' );
              this.fnHideEmptyColumns(this);
              $('#lblReportHeader').html(reportHeader);
              $('#lblFromDate').html(fromDateHeader);
              $('#lblToDate').html(fromToHeader);
              $('#tblReportHeader').show();
            },
            "searching": false,
            "retrieve": true, 
            "destroy": true,
            "ajax": "./getReportDetails",
            "jQueryUI": true,
            "dom": 'r<"H"lf><"datatable-scroll"t><"F"ip>',
            buttons: [
                      'copyHtml5',
                      'excelHtml5',
                      'csvHtml5',
                      'pdfHtml5'
                  ],
            "fnServerParams": function ( data ) {
                newData=data;
                newData.push( { "name": "reportType", "value": reportType }, { "name": "reportSubType", "value": reportSubType}, { "name": "fromDate", "value": fromDate}, { "name": "toDate", "value": toDate});
            },
            "columns": [
                            { "mData": "username", "sTitle": "username"},
                            { "mData": "transferType", "sTitle": "transferType"},
                            { "mData": "fromAccount", "sTitle": "fromAccount"}
                ]
        } );

但它没有在我的 UI 上显示任何导出按钮。

我的代码有什么问题？

【问题讨论】：

工作正常here..我认为既然您已将其复制到本地并提供了本地参考，则有些混乱。尝试给 cdn 文件引用本身..
我认为我的 dom 有问题，您能纠正吗？比如为按钮添加参数？
这是添加按钮的新版本，很抱歉，因为我对此不太了解......而且你有一些 ajax 格式来加载数据......所有这些都可能是其中的一部分问题。你试过给CDN文件源吗？
我已将 DOM 值更改为 "dom": 'Bfr' 现在正在显示按钮，但它们是不在工作状态！！！
我也面临同样的问题。看来上面的问题还没有答案:(。

标签： javascript jquery html css datatables

【解决方案1】：

我遇到了同样的问题，从添加所需的 javascript 和 css 文件到指定“dom”值和初始化数据表正文中的按钮数组，一切看起来都很好。但是，我不显示按钮的根本原因是我两次添加了依赖的 javascript 之一，并且相同的 js 文件被放置在我的资源文件夹内的两个不同位置。一旦我确定并删除了额外的重复 js 引用，问题就得到了解决，我能够看到按钮显示并且正常工作。

【讨论】：

【解决方案2】：

这里的问题是您已包含所需的 JS 文件，但在初始化时，您尚未指定导出选项，如下所述：

 $('#example').DataTable( {
      dom: 'Bfrtip',
      buttons: [
          'copy', 'csv', 'excel', 'pdf', 'print'
      ]
  });

您可以从 copy、csv、excel、pdf、print 根据要求。

您不能更改按钮的名称，它需要与上面提到的完全相同。

【讨论】：

为了清楚起见，您可以使用扩展选项更改按钮的名称，{extend:'print', 'Print Table'} 等等