Jquery Datatable 按钮未显示在 React js 上

Question

我在我的 react 应用程序中初始化了 Jquery 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 button through 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)' );