CODEWITHSUNDEEP
jquerydatatables
Ninju
Ninju

Reputation: 2530

dataTables Export to Excel button is not showing

I have a problem in jquery dataTables. The "Export to Excel" is not showing in iPad and mobile devices. It is showing in desktop. Other buttons like copy, csv and pdf are showing in iPad and desktop. Here is my code :

$('#productDatatable').DataTable({
    dom: 'Bfrtip',
    buttons: [
        'copy', 'excel', 'pdf', 'csv'
    ]
} );

Upvotes: 56

Views: 147839

Answers (15)

Shubham CSE
Shubham CSE

Reputation: 77

Do check that you have imported the scripts and styles at the correct place in angular.json

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "nvh-admin-portal": {
      "projectType": "application",
      "schematics": {
        "@schematics/angular:application": {
          "strict": true
        }
      },
      "root": "",
      "sourceRoot": "src",
      "prefix": "app",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/nvh-admin-portal",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.app.json",
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "src/styles.css",
              "node_modules/datatables.net-dt/css/jquery.dataTables.min.css",
              "node_modules/datatables.net-buttons-dt/css/buttons.dataTables.css"
            ],
            "scripts": [
              "node_modules/jquery/dist/jquery.min.js",
              "node_modules/datatables.net/js/jquery.dataTables.min.js",
              "node_modules/jszip/dist/jszip.js",
              "node_modules/datatables.net-buttons/js/dataTables.buttons.js",
              "node_modules/datatables.net-buttons/js/buttons.colVis.js",
              "node_modules/datatables.net-buttons/js/buttons.flash.js",
              "node_modules/datatables.net-buttons/js/buttons.html5.js",
              "node_modules/datatables.net-buttons/js/buttons.print.js"
            ]
          },
          "configurations": {
            "production": {
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "500kb",
                  "maximumError": "1mb"
                },
                {
                  "type": "anyComponentStyle",
                  "maximumWarning": "2kb",
                  "maximumError": "4kb"
                }
              ],
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ],
              "outputHashing": "all"
            },
            "test": {
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "1mb",
                  "maximumError": "1.5mb"
                },
                {
                  "type": "anyComponentStyle",
                  "maximumWarning": "3kb",
                  "maximumError": "5kb"
                }
              ],
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.test.ts"
                }
              ],
              "outputHashing": "all"
            },
            "development": {
              "buildOptimizer": false,
              "optimization": false,
              "vendorChunk": true,
              "extractLicenses": false,
              "sourceMap": true,
              "namedChunks": true
            }
          },
          "defaultConfiguration": "production"
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "configurations": {
            "production": {
              "browserTarget": "nvh-admin-portal:build:production"
            },
            "development": {
              "browserTarget": "nvh-admin-portal:build:development"
            }
          },
          "defaultConfiguration": "development"
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "browserTarget": "nvh-admin-portal:build"
          }
        },
        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "main": "src/test.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.spec.json",
            "karmaConfig": "karma.conf.js",
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "src/styles.css",
              "nvh-admin-portal/node_modules/bootstrap/dist/css/bootstrap.min.css",
              "nvh-admin-portal/node_modules/font-awesome/css/font-awesome.css"
            ],
            "scripts": [
              "nvh-admin-portal/node_modules/jquery/dist/jquery.min.js",
              "nvh-admin-portal/node_modules/bootstrap/dist/js/bootstrap.min.js"
            ]
          }
        }
      }
    }
  },
  "defaultProject": "nvh-admin-portal"
}

Upvotes: 0

Merrin K
Merrin K

Reputation: 1790

Try this

<link rel="stylesheet" href="https://cdn.datatables.net/1.11.3/css/jquery.dataTables.min.css"> 
<link rel="stylesheet" href="https://cdn.datatables.net/buttons/2.0.1/css/buttons.dataTables.min.css">

<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.11.3/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/buttons/2.0.1/js/dataTables.buttons.min.js"></script>
<script type="text/javascript" language="javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
<script type="text/javascript" language="javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/pdfmake.min.js"></script>
<script type="text/javascript" language="javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/vfs_fonts.js"></script>
<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/buttons/2.0.1/js/buttons.html5.min.js"></script>
<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/buttons/2.0.1/js/buttons.print.min.js"></script>


<script>
    $(document).ready(function() {
        $('#example').DataTable( {
            dom: 'Bfrtip',
            buttons: [
                'copy', 'csv', 'excel', 'pdf', 'print'
            ]
        } );
    } );
</script>

datatables.net:

Upvotes: 5

kausmil
kausmil

Reputation: 11

Perhaps you are using a JS file. If you are using this $document.ready(function() {}); This $document.ready(function() {}); Remove it. The button will then be displayed.

$(document).ready(function() { // <-remove;
let data = {
    "get-list": "history",
    symbol: 'coke'
};
$('#userhistoryTable').DataTable({
        order: [ [ 3, "DEC" ] ],
        destroy: true,
        dom: 'Blfrtip',
        buttons: [
            'copy', 'csv', 'excel', 'pdf', 'print'
        ],
        ajax: {
            url: 'curl',
            type: 'GET',
            data : data,
            dataSrc: '',
            error: function (e) {
                errorHandler(e);
            }
        },
        columns: [
            {data: "type"},
            {data: "price"},
            {data: "quantity"},
            {
                data: "time", 
                render: function(time) {
                    return moment(time).format('YYYY-MM-DD HH:mm');
                }
            }
        ]
    });
}); // <-remove;

Upvotes: 1

BANK
BANK

Reputation: 221

A lot of people encounter this issue a lot and usually has to do with how they arrange their css and javascript files. This arrangement worked for me.

@*CSS Files*@
    <link href="css/datatables.min.css" rel="stylesheet" />
    <link href="css/jquery.dataTables.min.css" rel="stylesheet" />
    <link href="css/buttons.bootstrap.min.css" rel="stylesheet" />
    <link href="css/dataTables.bootstrap4.min.css" rel="stylesheet" />
    <link href="css/buttons.bootstrap4.min.css" rel="stylesheet" />
    <link href="css/select.bootstrap.min.css" rel="stylesheet" />

@*JQuery Initializer*@
<script src="~/Scripts/jquery-3.3.1.js"></script>
<script src="~/Content/js/jszip.min.js"></script>
<script src="~/Content/js/pdfmake.min.js"></script>
<script src="~/Content/js/vfs_fonts.js"></script>
<script src="~/Content/js/jquery.dataTables.min.js"></script>
<script src="~/Content/js/dataTables.bootstrap4.min.js"></script>
<script src="~/Content/js/dataTables.buttons.min.js"></script>
<script src="~/Content/js/buttons.bootstrap4.min.js"></script>
<script src="~/Content/js/buttons.flash.min.js"></script>
<script src="~/Content/js/buttons.html5.min.js"></script>
<script src="~/Content/js/dataTables.select.min.js"></script>

Watch this video https://youtu.be/8vzTRHrwHlg it details how to solve your problem

Upvotes: 0

ReemRashwan
ReemRashwan

Reputation: 371

For me, importing the non-minified version of datatables solved the problem of disappearing buttons.

<!-- In html, import -->
DataTables/datatables.css
DataTables/datatables.js
<!-- instead of -->
DataTables/datatables.min.css
DataTables/datatables.min.js

I downloading the concatenated version of datatables that includes needed libraries. No need for additional imports.

Upvotes: 0

Herz3h
Herz3h

Reputation: 712

Adding info if someone else has problem with pdf button not showing with webpack 4, you have to use:

import pdfMake from 'pdfmake/build/pdfmake'
import pdfFonts from 'pdfmake/build/vfs_fonts'
import jsZip from 'jszip'
pdfMake.vfs = pdfFonts.pdfMake.vfs;
window.pdfMake = pdfMake;
window.JSZip = jsZip;

Upvotes: 5

Anjana Silva
Anjana Silva

Reputation: 9201

Try loading required JS libraries in the following order, if anyone still having issues in showing the DataTable export buttons.

<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.3.1/js/dataTables.buttons.min.js"></script> 
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.3.1/js/buttons.html5.min.js"></script>

Cheers!

Upvotes: 64

jpacareu
jpacareu

Reputation: 651

I know this is super old but since I was using Webpack 4 and Babel and I was importing the files (ES6) I had to put in the global scope the jsZip:

import 'datatables.net-bs';
import jsZip from 'jszip';
import 'datatables.net-buttons-bs';
import 'datatables.net-buttons/js/buttons.colVis.min';
import 'datatables.net-buttons/js/dataTables.buttons.min';
import 'datatables.net-buttons/js/buttons.flash.min';
import 'datatables.net-buttons/js/buttons.html5.min';

// This line was the one missing
window.JSZip = jsZip;

Hope it helps Cheers

Upvotes: 52

Augustin Riedinger
Augustin Riedinger

Reputation: 22188

For me I was missing the dom: 'Bfrtip', attribute in my table definition.

Upvotes: 42

Alx
Alx

Reputation: 311

Export to Excel doesn't work on Mac either. From the datatable's website: "The excelHtml5 button will not work in Safari at all - as noted in the button's documentation. This is because of an unimplemented feature in Safari."

Note that even if you use Chrome in apple products, it still uses Safari's engine so it won't work.

It might be fixed in the future but for now I just added the CSV button

Upvotes: 2

sakib rahman
sakib rahman

Reputation: 172

Just add these references before your data table script. It works for me.

For generating Datatable use this -

<link rel="stylesheet" href="//cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css">
<script src="//cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>

And for data table button use these references -

<link rel="stylesheet" href="https://cdn.datatables.net/buttons/1.4.1/css/buttons.dataTables.min.css">
<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/buttons/1.4.1/js/dataTables.buttons.min.js"></script>
<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/buttons/1.4.1/js/buttons.flash.min.js"></script>
<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/buttons/1.4.1/js/buttons.html5.min.js"></script>
<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/buttons/1.4.1/js/buttons.print.min.js"></script>

Upvotes: 15

Rajdeep
Rajdeep

Reputation: 802

I had same problem, it was not because of jquery scripts.

Go to browser setting(chrome in my case) > Search Flash >

Click on Control what information websites can use > it will navigate to content settings (chrome://settings/content?search=flash) >

Click on Flash >

In the Allow block add your website using Add button

Upvotes: 4

Al Masum Fahim
Al Masum Fahim

Reputation: 113

i ran into the same problem in Asp.NET MVC 4. the thing is if you add your CDN/JS files in _layout page then the buttons wont show in Main View page. instead add those CDN/JS files into the page you are using for data Table. also make sure they are in correct order.

jquery.min.js
jszip.min.js
pdfmake.min.js
vfs_fonts.js
buttons.html5.min.js

Upvotes: 1

Kupay
Kupay

Reputation: 361

Okay so I had the same exact problem (Excel button not showing while the other buttons are), and it appears that you have to include your JavaScript files in a specific order, or it won't work.

For me the problem was that I was including buttons.html5.js before jszip.js, but you have to put them in this order:

jszip.js
buttons.html5.js

And you also have to put these two files after the DataTables and DataTables.buttons files

What I find problematic is that if you put them in the wrong order, there isn't any JavaScript error displayed in the browser console.

Upvotes: 26

davidkonrad
davidkonrad

Reputation: 85538

You should refer to the ★html5 versions

$('#productDatatable').DataTable({
  dom: 'Bfrtip',
  buttons: [
    'copyHtml5', 'excelHtml5', 'pdfHtml5', 'csvHtml5'
  ]
} );

Reason: When using copy, excel etc, you are in fact in risk of referring to the flash implementation, which really should be considered as a fallback only. Flash is removed / disabled from iPads and most smartphones, thats why the Excel button not is working. If you still have problems, ensure you have included these library files 

jszip.min.js
pdfmake.min.js
vfs_fonts.js
buttons.html5.min.js

Upvotes: 23

Related Questions