Question

我正在使用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上显示任何导出按钮。

我的代码有什么问题？

Answer 1

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

Answer 2

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

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

您可以从复制， csv ， excel ， pdf ，打印<中删除选项/ strong>根据要求。

您无法更改按钮的名称，它必须与提及的完全相同。

导出按钮未出现在Datatable中

2 个答案: