Excel Sheet download button is not working

Omar Tweet

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.

allan

Try using:

{
  extend: 'excelHtml5',
  footer: false
},

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

allan

I've committed a fix for the error here.

Allan

Omar Tweet

Hello @allan , still the same issue

kthorngren

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

Omar Tweet

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

kthorngren

Use the Download Builder to get the proper files for the Bootstrap version being used and the extensions you want.

Kevin

Omar Tweet

Hello @kthorngren , I am not able to get the file jquery.dataTables.min.js with 2.0.0 version.

Omar Tweet

Hello @kthorngren , I am not able to get the file jquery.dataTables.min.js with 2.0.0 version.

kthorngren

I don't believe jquery.dataTables.min.js exists with 2.0. Its just datatables.min.js. Use the files provided by the Download Builder.

Kevin

Omar Tweet

Again same issue. Now the line no. 97 and 100 are having same version of JS

kthorngren

As I said, only load datatables.js once. Remove line 100.

Kevin

Omar Tweet

Hello @kthorngren , If I remove dataTables.js from line no. 100 then buttons are getting displayed and UI is also got distorted

allan

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

Omar Tweet

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

Omar Tweet

Okay, I have made changes and buttons are visible but still the same issue with Excel button

allan

Use this for the CSS and JS for the DataTables components on your page:

<link href="https://cdn.datatables.net/v/bs4/jszip-3.10.1/dt-2.0.0/b-3.0.0/b-html5-3.0.0/datatables.min.css" rel="stylesheet">
 
<script src="https://cdn.datatables.net/v/bs4/jszip-3.10.1/dt-2.0.0/b-3.0.0/b-html5-3.0.0/datatables.min.js"></script>

That is DataTables and Buttons with Bootstrap 4 styling, plus the HTML5 export buttons and JSZip for the Excel export.

Omar Tweet

So, I need to remove all other JS and CSS? Which JS and CSS need to keep? Or these two are enough?

Omar Tweet

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

allan

You are still loading extra styles and JS. For example:

  <link rel="stylesheet" href="https://cdn.datatables.net/2.0.0/css/dataTables.dataTables.css">
  <link rel="stylesheet" href="https://cdn.datatables.net/buttons/3.0.0/css/buttons.dataTables.css">
  <link rel="stylesheet" href="./plugins/datatables-bs4/css/dataTables.bootstrap4.min.css">
  
  <!-- Toastr -->
  <link rel="stylesheet" href="./plugins/toastr/toastr.min.css">
  <!-- Font Awesome Icons -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="./plugins/datatables-bs4/css/dataTables.bootstrap4.min.css">
  <link rel="stylesheet" href="./plugins/datatables-responsive/css/responsive.bootstrap4.min.css">
  <link href="https://cdn.datatables.net/v/bs4/jszip-3.10.1/dt-2.0.0/b-3.0.0/b-html5-3.0.0/datatables.min.css" rel="stylesheet">

Should be:

  <!-- Toastr -->
  <link rel="stylesheet" href="./plugins/toastr/toastr.min.css">
  <!-- Font Awesome Icons -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <link href="https://cdn.datatables.net/v/bs4/jszip-3.10.1/dt-2.0.0/b-3.0.0/b-html5-3.0.0/datatables.min.css" rel="stylesheet">

Similar for the JS.

Omar Tweet

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.

kthorngren

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:

VM769 buttons.html5.js:570 Uncaught TypeError: Cannot read properties of undefined (reading 'length')

function _excelColWidth(data, col) {
    var max = data.header[col].length;
    var len, lineSplit, str;

    if (data.footer && data.footer[col].length > max) {
        max = data.footer[col].length;
    }

It seems each footer cell contains undefined for columns where the th was changed to contain the text input. Note only columns 1 and 2 had the search inputs applied.

>data.footer
[
    "Name",
    undefined,
    undefined,
    "Age",
    "Start date",
    "Salary"
]

The data.footer[col].length is failing in this case. Not sure if the problem is due to needing an additional undefined check or if something upstream is not building data.footer correctly. @allan will need to take a look.

Kevin

Omar Tweet

@kthorngren ,

Drop Down button for pagination [5,10,25] is not getting displayed

allan

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 standard select rather than a drop down button (since you've replaced the default topStart with your buttons).

Allan

Omar Tweet

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;
}
}

itram

The fix from Alan worked for me

iansr

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
*/

kthorngren

@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