如何以PDF、CSV和Excel格式导出DataTables数据DataTables是一个流行的分页jQuery库。它有

DataTables是一个流行的分页jQuery库。它有许多功能，如 - 搜索过滤器，排序，改变默认的页面长度，等等。其中一个是导出功能。

它有以下导出选项--拷贝、pdf、csv和excel。

在本教程中，我展示了如何在DataTable中添加导出按钮。

How to Export DataTables Data in PDF, CSV, And Excel Format makitweb.com

内容

1.表格

我在这个例子中使用了employees 表格。

CREATE TABLE `employees` (
  `id` int(11) NOT NULL PRIMARY KEY AUTO_INCREMENT,
  `emp_name` varchar(80) NOT NULL, 
  `salary` varchar(20) NOT NULL,
  `gender` varchar(10) NOT NULL,
  `city` varchar(80) NOT NULL,
  `email` varchar(80) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8;

2.2 .配置

为数据库连接创建一个config.php 。

完成的代码

<?php

$host = "localhost"; /* Host name */$user = "root"; /* User */$password = ""; /* Password */$dbname = "tutorial"; /* Database name */
$con = mysqli_connect($host, $user, $password,$dbname);
// Check connection
if (!$con) {
  die("Connection failed: " . mysqli_connect_error());
}

3.H TML & PHP

包括CSS和JS

包括DataTables和jQuery库。要在DataTables中实现导出，需要包括其他CSS和JS文件。

<!-- Datatable CSS -->
<link href='https://cdn.datatables.net/1.12.1/css/jquery.dataTables.min.css' rel='stylesheet' type='text/css'>
<link href='https://cdn.datatables.net/buttons/2.2.3/css/buttons.dataTables.min.css' rel='stylesheet' type='text/css'>

<style type="text/css">
.dt-buttons{
   width: 100%;
}
</style>

<!-- jQuery Library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

<!-- Datatable JS -->
<script src="https://cdn.datatables.net/1.12.1/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/buttons/2.2.3/js/dataTables.buttons.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/pdfmake.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/vfs_fonts.js"></script>
<script src="https://cdn.datatables.net/buttons/2.2.3/js/buttons.html5.min.js"></script>

载入数据

创建<table id='empTable' > 并从employees 表中获取所有记录。

在获取的记录上进行循环，并添加<table > 行。

完成的代码

<?php 
include "config.php";
?>
<!doctype html>
<html>
<head>
   <title>How to Export DataTables data in PDF, CSV, and Excel format</title>

   <!-- Datatable CSS -->
   <link href='https://cdn.datatables.net/1.12.1/css/jquery.dataTables.min.css' rel='stylesheet' type='text/css'>
   <link href='https://cdn.datatables.net/buttons/2.2.3/css/buttons.dataTables.min.css' rel='stylesheet' type='text/css'>

   <style type="text/css">
   .dt-buttons{
       width: 100%;
   }
   </style>

   <!-- jQuery Library -->
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

   <!-- Datatable JS -->
   <script src="https://cdn.datatables.net/1.12.1/js/jquery.dataTables.min.js"></script>
   <script src="https://cdn.datatables.net/buttons/2.2.3/js/dataTables.buttons.min.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/pdfmake.min.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/vfs_fonts.js"></script>
   <script src="https://cdn.datatables.net/buttons/2.2.3/js/buttons.html5.min.js"></script>

</head>
<body >

   <div >

     <!-- Table -->
     <table id='empTable' class='display dataTable'>
        <thead>
           <tr>
              <th>Employee name</th>
              <th>Email</th>
              <th>Gender</th>
              <th>Salary</th>
              <th>City</th>
           </tr>
        </thead>
        <tbody>
        <?php

           ## Fetch records
           $empQuery = "select * from employees";
           $empRecords = mysqli_query($con, $empQuery);
           
           while ($row = mysqli_fetch_assoc($empRecords)) {
        ?>
              <tr>
                 <td><?= $row['emp_name'] ?></td>
                 <td><?= $row['email'] ?></td>
                 <td><?= $row['gender'] ?></td>
                 <td><?= $row['salary'] ?></td>
                 <td><?= $row['city'] ?></td>
              </tr>
        <?php
           }
        ?>
        </tbody>
     </table>
   </div>

</body>

</html>

4.脚本

在<table id='empTable' > 上初始化DataTables。

添加dom: 'Blfrtip' 和buttons 选项，其中有具体的导出按钮细节。

在这个例子中，我正在添加copy,pdf,csv, 和excel 出口按钮。

默认情况下，DataTables导出所有可见的列，但你可以使用exportOptions 来控制它。

在columns 中指定需要导出的列索引位置。在这个例子中，我为pdf导出指定了0,1列。

这里，0是雇员姓名，1是电子邮件列。

对于其他的导出按钮也可以这样使用。

完成的代码

$(document).ready(function(){
  var empDataTable = $('#empTable').DataTable({
     dom: 'Blfrtip',
     buttons: [
       {  
          extend: 'copy'
       },
       {
          extend: 'pdf',
          exportOptions: {
            columns: [0,1] // Column index which needs to export
          }
       },
       {
          extend: 'csv',
       },
       {
          extend: 'excel',
       } 
     ] 

  });

});

5.演示

查看演示

6.总结

使用上述脚本，你可以轻松地在数据表中添加导出按钮。

但是有一个问题，当serverSide: true 时，正式的导出功能不能正常工作。

如果你已经设置了serverSide: true ，那么我建议你创建自定义按钮来导出数据，而不是使用默认的。

如果你觉得这个教程有帮助，那么别忘了分享。

如何以PDF、CSV和Excel格式导出DataTables数据

内容

1.表 格

2.2 .配置

3.H TML & PHP

4.脚 本

5.演 示

6.总 结

相关帖子。

1.表格

4.脚本

5.演示

6.总结