Excel Sheet download button is not working
Excel Sheet download button is not working
Omar Tweet
Posts: 22Questions: 0Answers: 0
Hello @kthorngren , In the below link:
https://justjammu.com/testrec/record.php
The Excel button is not working and rest of buttons are working fine.
Replies
Try using:
You probably don't want to export your footer with the input elements, and if you do, you'd need to provide a formatter to get the values from the input elements. At the moment it is finding the value for those cells to be
undefined
, hence the error.Allan
I've committed a fix for the error here.
Allan
Hello @allan , still the same issue
Possibly its due to loading Datatables twice.You are loading 1.11.4 on line 97 and 2.0.0 on line 100. Loading Datatables multiple times can cause strange issue. Remove line 97 and replace it by moving line 100 to line 97 so 2.0.0 loads before the rest of the .js files.
Kevin
Do I need to use this js ?
https://cdn.datatables.net/buttons/3.0.0/js/buttons.html5.min.js
Even then I am facing the same issue
Use the Download Builder to get the proper files for the Bootstrap version being used and the extensions you want.
Kevin
Hello @kthorngren , I am not able to get the file jquery.dataTables.min.js with 2.0.0 version.
Hello @kthorngren , I am not able to get the file jquery.dataTables.min.js with 2.0.0 version.
I don't believe
jquery.dataTables.min.js
exists with 2.0. Its justdatatables.min.js
. Use the files provided by the Download Builder.Kevin
Again same issue. Now the line no. 97 and 100 are having same version of JS
As I said, only load datatables.js once. Remove line 100.
Kevin
Hello @kthorngren , If I remove dataTables.js from line no. 100 then buttons are getting displayed and UI is also got distorted
That is because your first
script
tag doesn't load the Bootstrap integration. It just loads the DataTables default.I'd suggest going to the download builder and starting again for your DataTables files.
Allan
I am really sorry, I am unable to understand what should I suppose to do in the code.
I have downloaded on the local machine and then included into the code because If I directly give the https path then it is taking little bit of time to load the website.
I have gone through the link of "download builder" but unable to understand the sequence. Do I need to download all Bootstrap 3,4,5 their CSS and JS
Okay, I have made changes and buttons are visible but still the same issue with Excel button
Use this for the CSS and JS for the DataTables components on your page:
That is DataTables and Buttons with Bootstrap 4 styling, plus the HTML5 export buttons and JSZip for the Excel export.
So, I need to remove all other JS and CSS? Which JS and CSS need to keep? Or these two are enough?
https://justjammu.com/testrec/record.php
Made changes and still the same issue. But I want button style differently and not like this one. Also the pagination numbers got big space in between them. I want the old style back.
Also the drop-down of the page number [5,10,25] -- that is gone
You are still loading extra styles and JS. For example:
Should be:
Similar for the JS.
I have kept these JS files, because If I removed these files then buttons are not working.
I have changed the code and still below issues exist:
1) Drop Down button for pagination [5,10,25] is not getting displayed
2) Excel button is not working.
I put together this simple example to make it easier to debug:
https://live.datatables.net/guzejiga/1
Its this search inputs example which is used in Omar's test case. This error still occurs in buttons.html5.js:
It seems each footer cell contains
undefined
for columns where theth
was changed to contain the text input. Note only columns 1 and 2 had the search inputs applied.The
data.footer[col].length
is failing in this case. Not sure if the problem is due to needing an additionalundefined
check or if something upstream is not buildingdata.footer
correctly. @allan will need to take a look.Kevin
@kthorngren ,
Drop Down button for pagination [5,10,25] is not getting displayed
I've committed a fix for the error with the footer elements that contain an input.
I added
pageLength
to Kevin's test case and the length menu shows: https://live.datatables.net/guzejiga/2/edit .See
layout
for the documentation on if you want the standardselect
rather than a drop down button (since you've replaced the defaulttopStart
with your buttons).Allan
Hello @allan and @kthorngren , I have fixed the issue:
_excelColWidth(data, i, config.footer) -- from here, I have passed one more param. This is in DataTable.ext.buttons.excelHtml5
In function _excelColWidth(data, col, footer) --- I have passed one more param and below if condition
if(footer){
if (data.footer && data.footer[col].length > max) {
max = data.footer[col].length;
}
}
The fix from Alan worked for me
I am getting a similar error when I add a sort drop down in place of a column header.
If I remove the drop down, the spreadsheet exports. I read the solution posted above, but there isn't a data.footer or data.header in my file to change.
Cannot read properties of undefined (reading 'length')
The error is happening in this section of my bundled js file
/*!
* HTML5 export buttons for Buttons and DataTables.
* © SpryMedia Ltd - datatables.net/license
*
* FileSaver.js (1.3.3) - MIT license
* Copyright © 2016 Eli Grey - http://eligrey.com
*/
@iansr Make sure you are using the latest Datatables 2.0 and Buttons 3.0 to obtain the header and footer fixes. Use the Download Builder for this. If you still have issues then please post a link to your page or test case replicating the issue so we can help debug.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case
Kevin