反応アプリでJqueryDatatablesを初期化しましたが、ボタンが表示されないことを除けば、完全に正常に機能します。これが私のコードです：
最初にこれを試しましたが、機能しますが、ボタンが表示されません。
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 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)' );
React Appから同様の質問Datatablesボタンに出くわしましたが、問題は解決しませんでした。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)' );
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加