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

【问题标题】：I want to add excel button in my data table for excel export我想在我的数据表中添加 excel 按钮以进行 excel 导出
【发布时间】：2019-09-11 10:26:01
【问题描述】：

我正在尝试通过添加 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 但它不起作用。我不知道我的代码哪里错了。

【问题讨论】：

你添加datatable js库了吗？

标签： javascript php jquery codeigniter datatable

【解决方案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

【讨论】：

它添加了excel按钮但隐藏了页面过滤器
不，它不会隐藏页面过滤器。在这里查看datatables.net/extensions/buttons/examples/html5/simple.html
页面过滤器是什么意思？这是数据表搜索过滤器还是您的自定义过滤器？
显示条目下拉菜单被隐藏
我已经更新了我的答案。您只是缺少 dom 中的 l 标志。 l 为“长度变化输入控制”。 dom: 'lBfrtip'

【解决方案2】：

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

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">

<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'
        ]
    } );
} );

【讨论】：

【解决方案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

更多信息请参见Datable

【讨论】：