我想在我的数据表中添加 excel 按钮以进行 excel 导出

Question

我正在尝试通过以下方式添加 excel 按钮

buttons: [
'excel'
]

但它不起作用

我的代码：

<div class="row">
<div class="col-9">
<div class="card">
<div class="card-body">
<h4 class="mt-0 mb-3 header-title">Subscribers</h4>
<div class="row">
<div class="col-sm-12">
<div class="table-responsive">
<table id="all_sub" class="table">
<thead class="thead-light">
<tr>
<th>Subscriber Name</th>
<th>Course Name</th>
</tr>
</thead>
<tbody>
<?php foreach($allsubscriber as $allsub):?>
<tr>
<td><?php echo $allsub->user_firstname;?></td>
<td><?php echo $allsub->course_title;?></td>
</tr>
<?php endforeach; ?>              
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
$(document).ready( function () {
$('#all_sub').DataTable();
buttons: [
'excel'
]
});
</script>

在上面的代码中，我正在尝试添加 excel，但它不起作用。 我不知道我的代码哪里错了。

Answer 1

添加此脚本

$(document).ready(function() {
$('#all_sub').DataTable( {
dom: 'lBfrtip',
buttons: [ 
'excelHtml5', 
]
} );
} );

并加载以下数据表库

https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css
https://cdn.datatables.net/buttons/1.5.6/css/buttons.dataTables.min.css
https://code.jquery.com/jquery-3.3.1.js
https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js
https://cdn.datatables.net/buttons/1.5.6/js/dataTables.buttons.min.js
https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js
https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/pdfmake.min.js
https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/vfs_fonts.js
https://cdn.datatables.net/buttons/1.5.6/js/buttons.html5.min.js

Answer 2

注意：- 请注意 - 此属性需要按钮扩展 数据表。

.CSS

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/1.5.6/css/buttons.dataTables.min.css">

.JS

<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/buttons/1.5.6/js/dataTables.buttons.min.js"></script>
<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/buttons/1.5.6/js/buttons.html5.min.js"></script>
<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/buttons/1.5.6/js/buttons.print.min.js"></script>

.HTML

<table id="all_sub" class="table">
<thead class="thead-light">
<tr>
<th>Subscriber Name</th>
<th>Course Name</th>
</tr>
</thead>
<tbody>
<?php foreach($allsubscriber as $allsub):?>
<tr>
<td><?php echo $allsub->user_firstname;?></td>
<td><?php echo $allsub->course_title;?></td>
</tr>
<?php endforeach; ?>              
</tbody>
</table>

JQuery 脚本

$(document).ready(function() {
$('#example').DataTable( {
dom: 'Bfrtip',
buttons: [
'copy', 'csv', 'excel', 'pdf', 'print'
]
} );
} );

Answer 3

你在调用DataTable()后放置按钮，但它应该作为参数传递。

请参阅下面的代码

$('#all_sub').DataTable( {
dom: 'Bfrtip',
buttons: [
'excel'
]
} );

此外，您需要包含以下必需的JS(jQuery版本可能因使用的可识别插件而异(

https://code.jquery.com/jquery-3.3.1.js
https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js
https://cdn.datatables.net/buttons/1.5.6/js/dataTables.buttons.min.js
https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js
https://cdn.datatables.net/buttons/1.5.6/js/buttons.html5.min.js

有关详细信息，请参阅可达表