導出按鈕未出現在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中刪除選項。

您無法更改按鈕的名稱，它需要與提到的完全相同。