javascript 导出按钮未出现在数据表中
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/32520996/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Export buttons are not appearing in Datatable
提问by Puneet Purohit
I am using jQuery DataTables 1.10 and all my code is working fine. To add export functionality I refer thislink. I have added all the files what is said
我正在使用 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
I have downloaded these files and stored locally. So my final code is like :
我已经下载了这些文件并存储在本地。所以我的最终代码是这样的：
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"}
]
} );
But it is not showing any export button on my UI.
但它没有在我的 UI 上显示任何导出按钮。
What is the wrong in my code ?
我的代码有什么问题？
回答by Vishal
I had the same issues where everything looked good from adding required javascript and css files to specifying "dom" value and initializing buttons array in the data table body. However, my root cause of not displaying the buttons was that I was adding one of the dependent javascripts two times and same js file was placed in two different locations inside my resources folder. As soon as I identified and remove additional duplicate js reference, the problem got resolved and I was able to see the buttons displayed and working as well.
我遇到了同样的问题，从添加所需的 javascript 和 css 文件到指定“dom”值和初始化数据表正文中的按钮数组，一切看起来都很好。但是，我不显示按钮的根本原因是我两次添加了一个依赖的 javascript，并且相同的 js 文件被放置在我的资源文件夹中的两个不同位置。一旦我确定并删除了额外的重复 js 引用，问题就解决了，我能够看到按钮显示和工作。
回答by PratikSatikunvar
Here issue is you have included required JS files but at the time of initialization, you haven't specified options for export like mentioned below:
这里的问题是您已经包含了所需的 JS 文件，但在初始化时，您没有指定如下所述的导出选项：
$('#example').DataTable( {
dom: 'Bfrtip',
buttons: [
'copy', 'csv', 'excel', 'pdf', 'print'
]
});
You can remove the options from copy, csv, excel, pdf, printaccording to requirement.
您可以根据需要从copy、csv、excel、pdf、print 中删除选项。
You cannot change the name of button, it needs to be exact same as mentioned.
您不能更改按钮的名称，它需要与提到的完全相同。
