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

注意：-请注意-此属性需要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">

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版本可能会根据所使用的datable插件而有所不同）

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

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

3 个答案: