向表中新增按鈕

在你的 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 檔案安裝在專案中。