Excel Sheet download button is not working

Excel Sheet download button is not working

Omar TweetOmar 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

  • allanallan Posts: 63,439Questions: 1Answers: 10,459 Site admin

    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

  • allanallan Posts: 63,439Questions: 1Answers: 10,459 Site admin

    I've committed a fix for the error here.

    Allan

  • Omar TweetOmar Tweet Posts: 22Questions: 0Answers: 0

    Hello @allan , still the same issue

  • kthorngrenkthorngren Posts: 21,292Questions: 26Answers: 4,944

    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 TweetOmar Tweet Posts: 22Questions: 0Answers: 0

    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

  • kthorngrenkthorngren Posts: 21,292Questions: 26Answers: 4,944

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

    Kevin

  • Omar TweetOmar Tweet Posts: 22Questions: 0Answers: 0

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

  • Omar TweetOmar Tweet Posts: 22Questions: 0Answers: 0

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

  • kthorngrenkthorngren Posts: 21,292Questions: 26Answers: 4,944

    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 TweetOmar Tweet Posts: 22Questions: 0Answers: 0

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

  • kthorngrenkthorngren Posts: 21,292Questions: 26Answers: 4,944

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

    Kevin

  • Omar TweetOmar Tweet Posts: 22Questions: 0Answers: 0

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

  • allanallan Posts: 63,439Questions: 1Answers: 10,459 Site admin

    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 TweetOmar Tweet Posts: 22Questions: 0Answers: 0

    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 TweetOmar Tweet Posts: 22Questions: 0Answers: 0

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

  • allanallan Posts: 63,439Questions: 1Answers: 10,459 Site admin
    edited February 27

    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 TweetOmar Tweet Posts: 22Questions: 0Answers: 0

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

  • Omar TweetOmar Tweet Posts: 22Questions: 0Answers: 0
    edited February 27

    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

  • allanallan Posts: 63,439Questions: 1Answers: 10,459 Site admin

    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 TweetOmar Tweet Posts: 22Questions: 0Answers: 0
    edited February 27

    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.

  • kthorngrenkthorngren Posts: 21,292Questions: 26Answers: 4,944
    edited February 27

    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 TweetOmar Tweet Posts: 22Questions: 0Answers: 0

    @kthorngren ,

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

  • allanallan Posts: 63,439Questions: 1Answers: 10,459 Site admin

    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 TweetOmar Tweet Posts: 22Questions: 0Answers: 0

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

  • itramitram Posts: 43Questions: 15Answers: 0

    The fix from Alan worked for me

  • iansriansr Posts: 13Questions: 3Answers: 0

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

  • kthorngrenkthorngren Posts: 21,292Questions: 26Answers: 4,944

    @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

Sign In or Register to comment.