向表中添加按钮

在你的 JS 文件中，将此选项添加到你的数据表中：

  buttons: [ 'excel', 'pdf', 'copy' ]

它看起来像：

$('#yourTableID').DataTable({
  buttons: [ 'excel', 'pdf', 'copy' ]
});

使用按钮为数据表添加必要的 css 文件：

<link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.15/css/dataTables.bootstrap4.min.css"/>
<link rel="stylesheet" type="text/css" href="//cdn.datatables.net/buttons/1.3.1/css/buttons.bootstrap4.min.css"/>

使用按钮为数据表添加必要的 javascript 文件：

<script type="text/javascript" src="//cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="//cdn.datatables.net/1.10.15/js/dataTables.bootstrap4.min.js"></script>
<script type="text/javascript" src="//cdn.datatables.net/buttons/1.3.1/js/dataTables.buttons.min.js"></script>
<script type="text/javascript" src="//cdn.datatables.net/buttons/1.3.1/js/buttons.bootstrap4.min.js"></script>

<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
<script type="text/javascript" src="//cdn.rawgit.com/bpampuch/pdfmake/0.1.27/build/pdfmake.min.js"></script>
<script type="text/javascript" src="//cdn.rawgit.com/bpampuch/pdfmake/0.1.27/build/vfs_fonts.js"></script>
<script type="text/javascript" src="//cdn.datatables.net/buttons/1.3.1/js/buttons.html5.min.js"></script>

它看起来像这样的图片：

如果你没有看到按钮，请添加以下选项：

dom: 'Blfrtip',

到数据表选项列表。所以它看起来像：

$('#yourTableID').DataTable({
  dom: 'Blfrtip',
  buttons: [ 'excel', 'pdf', 'copy' ]
});

你将找到更多信息来定义要在页面上显示的表格控件元素以及此页面上的顺序。

注意： 先决条件是，jQuery 和 bootstrap4 文件安装在项目中。