Кнопки Jquery Datatable не отображаются на React JS

Question

Я инициализировал Jatery Datatables в своем приложении реагирования, и оно отлично работает, за исключением того, что кнопки не отображаются.Вот мой код:

Сначала я попробовал это, и он работает, но он не отображает кнопки.

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

Затем я также попробовал код ниже, выдает ошибкуне позволил моему приложению реагировать, чтобы сделать.Он жаловался на это 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')();

Наконец, как я инициализирую свои данные:

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

Я столкнулся с похожим вопросом Кнопка Datatables через React App , но это не решило мою проблему.Без кнопок для экспорта в Excel вся цель моего использования этого плагина будет побеждена.Могу ли я получить небольшую помощь?

Answer 1

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

После импорта всех моих зависимостей это было так же просто, как добавить

"dom": 'Bfrtip'

к моей инициализируемой датой.

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

Я избавился от этой строки

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