Export and PDF Buttons no longer working
Export and PDF Buttons no longer working
RAWaddell
Posts: 42Questions: 5Answers: 0
I use DataTables for an annual contest app which didn't happen last year due to the pandemic so I haven't checked in on it till now when I discovered that the 'Export to CSV' & 'Open in PDF' buttons no longer work. There is no error in the console, so I don't know how to debug. I upgraded to the the latest CDN versions and am using Bootstrap 3.4.0
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/jszip-2.5.0/dt-1.10.23/b-1.6.5/b-html5-1.6.5/b-print-1.6.5/sl-1.3.1/datatables.min.css"/>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/pdfmake.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/vfs_fonts.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/v/dt/jszip-2.5.0/dt-1.10.23/b-1.6.5/b-html5-1.6.5/b-print-1.6.5/sl-1.3.1/datatables.min.js"></script>
My JS code for setting up DT:
$('#show-entries').DataTable( {
dom: 'frtipB',
stateSave: true,
buttons: [
{
extend: 'csvHtml5', text: 'Export to CSV',
exportOptions: {
columns: [ 1, 2, 5, 6, 3, 4, 15, 16, 8, 17,
18, 19, 9, 10, 20, 11, 12, 21, 13, 22, 23 ]
}
},
{
extend: 'pdfHtml5',
text: 'Open in PDF',
header: true,
footer: true,
title: "WF Online Contest Entries",
download: 'open',
orientation: 'landscape',
pagesize: 'LETTER',
filename: function(){
var d = new Date();
var n = d.getTime();
return 'WF Online Contest Entries - ' + n;
},
extension: '.pdf',
customize : function(doc) {doc.pageMargins = [10, 10, 10,10 ]; },
exportOptions: {
columns: [ 1, 2, 5, 7, 8, 9, 10, 11, 12,13 ]
}
}
],
"language": {
"search": "Filter records:"
},
"lengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]],
columns: [
{ data: null, title: "Select", // 0
defaultContent: ''},
{ data: "ID", title: "ID" }, // 1
{ data: "Year", title: "Year" }, // 2
{ data: "First_Name", title: "First_Name" }, // 3
{ data: "Last_Name", title: "Last_Name" }, // 4
{ data: "Entry_Form_Number", title: "Entry #" }, // 5
{ data: "Barcode_Text", title: "Barcode" }, // 6
{ data: "Entrant_Name", title: "Entrant Name" }, // 7
{ data: "Model_Name", title: "Title or Name of Entry" }, // 8
{ data: "Category_Name", title: "Category" }, // 9
{ data: "Oversized", title: "Oversized" , // 10
render: function (data, type, row, meta) {
if (type === 'display') {
return data === "1" ? 'Y' : 'N';
}
return data;
}
},
{ data: "Paid", title: "Paid" , // 11
render: function (data, type, row, meta) {
if (type === 'display') {
return data === "1" ? 'Y' : 'N';
}
return data;
}
},
{ data: "DatePaid", title: "Date Paid" }, // 12
{ data: "DateCreated", title: "Date Created" }, // 13
{ data: null, title: "Print", // 14
render: function (data, type, row, meta) {
return '<input type="button" class="btn-print printrec" id="' + meta.row + '" value="Print"/>';
}
},
{ data: "Phone_Num", title: "Phone_Num" }, // 15
{ data: "Email", title: "Email" }, // 16
{ data: "Remarks", title: "Remarks" }, // 17
{ data: "Secured_to_Base", title: "Secured_to_Base" , // 18
render: function (data, type, row, meta) {
if (type === 'display') {
return data === "1" ? 'Y' : 'N';
}
return data;
}
},
{ data: "FK_Category", title: "FK_Category" }, // 19
{ data: "Accept_Agreement", title: "Accept_Agreement" , // 20
render: function (data, type, row, meta) {
if (type === 'display') {
return data === "1" ? 'Y' : 'N';
}
return data;
}
},
{ data: "CreatedBy", title: "CreatedBy" }, // 21
{ data: "LastUpdatedBy", title: "LastUpdatedBy" }, // 22
{ data: "DateLastUpdated", title: "DateLastUpdated" } // 23
],
"columnDefs": [
{
defaultContent: '',
orderable: false,
className: 'select-checkbox select-enabled',
targets: 0,
createdCell: function (td, cellData, rowData, row, col) {
if ( rowData.Paid === "1" ) {
$(td).removeClass( 'select-enabled' );
} else {
$(td).addClass( 'select-enabled' );
}
}
},
{
// Hide 'ID' & 'Year' columns (and others)
"targets": [ 1, 2, 15, 16, 17, 18, 19, 20, 21, 22, 23 ],
"visible": false,
"searchable": false
},
{
// Hide 'First_Name' & 'Last_Name' columns
"targets": [ 3, 4 ],
"visible": false
},
{
// Limit 'Entrant Name' text length
"targets": [ 7 ],
render: function ( data, type, row ) {
return type === 'display' && data.length > 45 ?
data.substr( 0, 42 ) +'…' :
data;
}
},
{
// Limit 'Title of Entry' text length
"targets": [ 8 ],
render: function ( data, type, row ) {
return type === 'display' && data.length > 50 ?
data.substr( 0, 47 ) +'…' :
data;
}
},
{ className: "dt-center", "targets": [ 10 ] }
],
select: {
style: 'multi',
selector: '.select-enabled',
info: true
},
order: [[ 1, 'asc' ]]
} );
This question has an accepted answers - jump to answer
This discussion has been closed.
Answers
I created a test case with your CDN code and your buttons init code:
http://live.datatables.net/feseziwe/1/edit
Had to update the columns exported sine the test case only has 6. The Excel export works. The PDF export opens a new tab but I don't see the PDF. Commented out
download: 'open',. AFAIK this is not a Datatables option. The PDF export now works.If you still need help then please update the test case to show the issue or provide a link to your page for help debugging.
Kevin
Thanks kthorngren. My page is behind a login so I'll need to modify it to allow access.
I checked your test case and you seem to be using a much older version of JQuery. Here's what I have (they are above the DT lines):
I think kthorngren found the real underlying issue - the
download: 'open'attribute. The other problem is I was logging in with a non-Admin user and normally the buttons would be greyed out; once I removed the above attribute the buttons returned to working exactly as expected.Thanks for your help!