数据表初始化和样式不适用于多个表

Question

我对多个表使用数据表，但第二个表中的设置和样式与第一个表不一样，一切都很好但是

问题是

• rowGroup > 错误：没有组（在第二张表上）
• 按钮 > 不显示（在第二张桌子上）

我用的DataTables 1.10.22版本 这是我的要求：

First Table
<table id="dataMightyWeb" class="table table-sm table-bordered table-hover">
<thead>
<tr>
<th>Col1</th>
<th>Col2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Col1</td>
<td>Col2</td>
</tr>
</tbody>
</table>

Second Table
<table id="dataMightyWeb" class="table table-sm table-bordered table-hover">
<thead>
<tr>
<th>Col1</th>
<th>Col2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Col1</td>
<td>Col2</td>
</tr>
</tbody>
</table>

<!-- DataTables -->
<link rel="stylesheet" href="plugins/datatables-bs4/css/dataTables.bootstrap4.min.css">
<link rel="stylesheet" href="plugins/datatables-responsive/css/responsive.bootstrap4.min.css">
<link rel="stylesheet" href="plugins/datatables-buttons/css/buttons.bootstrap4.min.css">
<link rel="stylesheet" href="plugins/datatables-fixedcolumns/css/fixedColumns.bootstrap4.min.css">
<link rel="stylesheet" href="plugins/datatables-rowgroup/css/rowGroup.bootstrap4.min.css">
<!-- DataTables & Plugins -->
<script src="plugins/datatables/jquery.dataTables.min.js"></script>
<script src="plugins/datatables-bs4/js/dataTables.bootstrap4.min.js"></script>
<script src="plugins/datatables-responsive/js/dataTables.responsive.min.js"></script>
<script src="plugins/datatables-responsive/js/responsive.bootstrap4.min.js"></script>
<script src="plugins/datatables-buttons/js/dataTables.buttons.min.js"></script>
<script src="plugins/datatables-buttons/js/buttons.bootstrap4.min.js"></script>
<script src="plugins/jszip/jszip.min.js"></script>
<script src="plugins/pdfmake/pdfmake.min.js"></script>
<script src="plugins/pdfmake/vfs_fonts.js"></script>
<script src="plugins/datatables-buttons/js/buttons.html5.min.js"></script>
<script src="plugins/datatables-buttons/js/buttons.print.min.js"></script>
<script src="plugins/datatables-buttons/js/buttons.colVis.min.js"></script>
<script src="plugins/datatables-fixedcolumns/js/dataTables.fixedColumns.min.js"></script>
<script src="plugins/datatables-rowgroup/js/dataTables.rowGroup.min.js"></script>
<!-- Alert Plugins -->
<script> 
$(document).ready(function() {
var table = $('.table').DataTable( {
"lengthChange": false,
"pagingType": "full",
"searching": true,
"paging": true,
"responsive": true,
"lengthMenu": [[ 10, 25, 50, -1 ],[ "10", "25", "50", "Show all" ]],
"ordering": true,
"info": true,
"order": [[0,"desc"]], 
"rowGroup": { "dataSrc": [ 0 ]},
"columnDefs": [{
    "targets": [0],
    "visible": false,
    "searchable": false
}],
"language": {
    searchPlaceholder: "Pencarian...",
    search: "",
}
});
table.buttons().container().appendTo('#dataMightyWeb_wrapper .col-md-6:eq(0)');
});
</script>

我希望有人能帮助我 谢谢大家