我在我的 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';
接下来,我也尝试了下面的代码,它抛出的错误不允许我的 React 应用程序呈现。它提示这个 Uncaught TypeError: Cannot set property '$' of undefined
在数据表中
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 的按钮,我使用这个插件的全部目的都被打败了。我能得到一点帮助吗?
最佳答案
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)' );
关于javascript - Jquery 数据表按钮未显示在 React js 上,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56076754/