Jquery Datatable Buttons Not Showing Up On React js

Question

I initialized Jquery Datatables in my react app and it works perfectly fine, except that the buttons aren't showing up. Here's my code:

I tried this at first and it works but it doesn't display the buttons.

import $ from 'jquery';
import JSZip from 'jszip';
window.JSZip = JSZip;

import 'datatables.net-bs4';
import 'datatables.net-responsive';
import 'datatables.net-buttons-bs4';
import 'datatables.net-buttons/js/buttons.colVis';
import 'datatables.net-buttons/js/buttons.html5';
import 'datatables.net-buttons/js/buttons.flash';
import 'datatables.net-buttons/js/buttons.print';

Next, I tried the code below as well, the error it throws didn't allow my react app to render. It complained about this Uncaught TypeError: Cannot set property '$' of undefined at DataTable

import $ from 'jquery';
const JSZip = require('jszip');
window.JSZip = JSZip;

require('datatables.net')();
require('datatables.net-responsive')();
require('datatables.net-buttons')();
require('datatables.net-buttons/js/buttons.colVis')();
require('datatables.net-buttons/js/buttons.html5')();
require('datatables.net-buttons/js/buttons.print')();

Finally, how I initialize my datatable:

var table = $('#dynamic_table').DataTable({
          'lengthChange': false,
          'buttons': [ 'copy', 'excel', 'pdf', 'colvis' ],
});
table.buttons().container().appendTo( '#dynamic_table_wrapper .col-md-6:eq(0)' );

I came across a similar question Datatables button through React App, but it didn't solve my problem. Without the buttons to export into excel the whole purpose of my using this plugin is defeated. Can I get a little help?

Is the HTML #dynamic_table actually visible before the DataTable Initialisation ? — mkane
– mkane, Commented May 13, 2019 at 11:20
I have had issue with those buttons (not appearing) in the past if the table was not actually visible (well not hidden) when doing the Initialisation.. I had display:none all worked fine but when brought in buttons it did not work. Maybe just try to ensure the underlying HTML table is visible 1st ... — mkane
– mkane, Commented May 13, 2019 at 17:57

SuperStar518 · Accepted Answer · 2019-06-24 10:35:31Z

5

import $ from 'jquery';
import JSZip from 'jszip';
window.JSZip = JSZip;

import 'datatables.net-bs4';
import 'datatables.net-responsive';
import 'datatables.net-buttons-bs4';
import 'datatables.net-buttons/js/buttons.colVis';
import 'datatables.net-buttons/js/buttons.html5';
import 'datatables.net-buttons/js/buttons.flash';
import 'datatables.net-buttons/js/buttons.print';

After importing all my dependencies, it was as simple as adding

"dom": 'Bfrtip'

to my datatable initialization.

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

I got rid of this line

table.buttons().container().appendTo( '#dynamic_table_wrapper .col-md-6:eq(0)' );

edited Jun 24, 2019 at 10:35

SuperStar518

2,9252 gold badges22 silver badges37 bronze badges

answered May 27, 2019 at 10:46

Ikechukwu

1,1451 gold badge13 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Leo Bruno Over a year ago

Did you managed to make pdf generation work?

Leo Bruno Over a year ago

My table displays the button, but nothing happens when I click it.

Collectives™ on Stack Overflow

Jquery Datatable Buttons Not Showing Up On React js

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related