Buttons for Excel, csv, print
Buttons for Excel, csv, print
JanNL_FR
Posts: 47Questions: 15Answers: 2
Hi, I did look at the examples but with no succes.
How can I implement buttons in a working script:
<script>
function format(d) {
return (
'SectorName 1: ' +
d.sectorname1 +
'<br>' +
'<br>' +
'Target Sentence: ' +
d.targetsentence
);
}
const table = new DataTable('#example', {
ajax: 'server_processing.php',
columns: [
{
class: 'dt-control',
orderable: false,
data: null,
defaultContent: '',
},
{ data: 'company' },
{ data: 'country' },
{ data: 'targetyears' },
{ data: 'sectorcode1' },
{ data: 'sectorname1' },
{ data: 'sourcedate' },
],
order: [[1, 'asc']],
processing: true,
serverSide: true,
initComplete: function () {
this.api()
.columns()
.every(function (index) {
let column = this;
let title = column.header().textContent;
// Skip search input creation for the first column (index 0)
if (index === 0) {
return;
}
// Create input element
let input = document.createElement('input');
input.placeholder = 'Search ' + title;
column.footer().replaceChildren(input);
// Event listener for user input
input.addEventListener('keyup', () => {
if (column.search() !== input.value) {
column.search(input.value).draw();
}
});
});
},
});
// Array to track the ids of the details displayed rows
const detailRows = [];
table.on('click', 'tbody td.dt-control', function () {
let tr = event.target.closest('tr');
let row = table.row(tr);
let idx = detailRows.indexOf(tr.id);
if (row.child.isShown()) {
tr.classList.remove('details');
row.child.hide();
// Remove from the 'open' array
detailRows.splice(idx, 1);
} else {
tr.classList.add('details');
row.child(format(row.data())).show();
// Add to the 'open' array
if (idx === -1) {
detailRows.push(tr.id);
}
}
});
// On each draw, loop over the `detailRows` array and show any child rows
table.on('draw', () => {
detailRows.forEach((id, i) => {
let el = document.querySelector('#' + id + ' td.dt-control');
if (el) {
el.dispatchEvent(new Event('click', { bubbles: true }));
}
});
});
</script>
Edited by Kevin: Syntax highlighting. Details on how to highlight code using markdown can be found in this guide
This question has accepted answers - jump to:
Answers
Start with the Buttons installation docs. Here are the basic steps:
dom`` and-option buttons` options to your Datatables initialization code. Start with this simple example and remove the buttons you don't want to use. For example:Kevin
Hi, Thank you.
I downloaded files via the download option and started with the example data. I've used some code from a live example, but I don't quite understand how to do it yet.
https://campcare.eu/buttons.html
Start by looking at the browser's console. You will see these two errors:
I believe the problem is that you are loading
jquery.dataTables.min.jstwice:Once on line 2 then, after loading jszip and pdfmake, again on line 6. Line 6 is overwriting the connection jszip and pdfmake made to the Datatables loaded on line 2. Remove line 6 so Datatables loads only once.
Kevin
Thanks Kevin.
Not all required .js files were present on the server.
Changed
... buttons: ['copy', 'csv', 'excel', 'pdf', 'print'], ...
To
... buttons: ['copy', 'csv', 'excelHtml5', 'pdfHtml5', 'print'], ...
When I enter the PDF button, I get a message in the console:
Uncaught (in promise) File 'Roboto-Regular.ttf' not found in virtual file system
Promise.then (asynchroon)
Document._createDoc @ pdfmake.min.js:2
Document.getBuffer @ pdfmake.min.js:2
Document.getBlob @ pdfmake.min.js:2
Document.download @ pdfmake.min.js:2
action @ buttons.html5.min.js:8
a @ dataTables.buttons.min.js:4
(anoniem) @ dataTables.buttons.min.js:4
dispatch @ jquery-3.7.0.js:5135
elemData.handle @ jquery-3.7.0.js:4939
It looks like you are missing the pdf export button requirement of
vs_fonts.js. See the pdf docs for details.Use the download builder to get all the appropriate files.
Kevin
Thanks,
vfs_fonts.js :
That was what was supposed to replace the double Line 6, but I forgot to implement it.
Jan.