导出按钮未出现在Datatable中

Question

我正在使用jQuery DataTables 1.10,我的所有代码都运行正常.要添加导出功能,请参阅此链接.我已经添加了所说的所有文件

//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上显示任何导出按钮.

我的代码有什么问题？

Answer 1

我有一些相同的问题,一切都很好,从添加所需的javascript和css文件到指定"dom"值和初始化数据表体中的按钮数组.但是,我没有显示按钮的根本原因是我添加了一个依赖的javascripts两次,并且相同的js文件被放置在我的资源文件夹中的两个不同位置.一旦我确定并删除了其他重复的js参考,问题就解决了,我能够看到按钮显示并正常工作.

Answer 2

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

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

您可以根据需要从copy、csv、excel、pdf、print 中删除选项。

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