如何解决使用 initComplete 包含数据表导出按钮
我正在尝试按照此示例 https://datatables.net/extensions/buttons/examples/styling/bootstrap.html 在数据表中包含导出按钮。检查评论选项卡，它说 initComplete 需要用于服务器端数据。
我正在使用 PHP，这是我的代码。您可以使用 https://wtools.io/php-sandbox 对其进行测试。请选择PHP v5.6.31。
<!DOCTYPE html>
<html>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="https://cdn.datatables.net/1.10.23/css/dataTables.bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="https://cdn.datatables.net/buttons/1.6.5/css/buttons.bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<body>
<?PHP
$users = [
[
'id' => 1,'name' => 'User 1'
],[
'id' => 2,'name' => 'User 2'
]
];
?>
<table id="users" class="table table-hover table-striped datatable">
<thead>
<tr>
<th width="20">#</th>
<th width="65">Name</th>
</tr>
</thead>
<tbody>
<?PHP if($users != null){ $i=0; foreach($users as $row){ $i++; ?>
<tr>
<td class="text-center"><?PHP echo $i; ?></td>
<td><?PHP echo $row['name']; ?></td>
</tr>
<?PHP }}; ?>
</tbody>
</table>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.23/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.23/js/dataTables.bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.6.5/js/dataTables.buttons.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.6.5/js/buttons.bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/pdfmake.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/vfs_fonts.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.6.5/js/buttons.html5.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.6.5/js/buttons.print.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.6.5/js/buttons.colVis.min.js"></script>
<script>
$('.datatable').DataTable({
lengthChange: false,buttons: [ 'copy','excel','pdf','colvis' ],initComplete: function(settings,json){
$('.datatable').wrap('<div class="table-responsive"></div>');
$('.datatable').buttons().container().appendTo( $('.datatable .col-sm-6:eq(0)'));
}
});
</script>
</body>
</html>所以我的导出按钮仍然没有显示。控制台日志显示 Uncaught TypeError: $(...).buttons is not a function。我不太确定这是否应该是代码的实现方式，因为注释对我来说不是很清楚。
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
