数据表按钮导出未显示在 adminLTE/Bootstrap答案

【问题标题】：datatable button export not showing in adminLTE/Bootstrap数据表按钮导出未显示在 adminLTE/Bootstrap
【发布时间】：2018-07-27 22:40:42
【问题描述】：

您好，我在 AdminLte 中使用 Datatables，并且我正在尝试包含 Datatables 的导出按钮，当使用没有任何管理员的普通 html 时，它的工作正常但是当我试图将它与 ADMINLTE 集成时，导出按钮就像这样丢失了我的代码是这样的

<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.2/css/buttons.dataTables.min.css">
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
    <script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>


    <script type="text/javascript" language="javascript" src="https://cdn.datatables.net/buttons/1.5.2/js/dataTables.buttons.min.js"></script>
  <script type="text/javascript" src="https://cdn.datatables.net/buttons/1.5.2/js/buttons.bootstrap.min.js"></script>
    <script type="text/javascript" language="javascript" src="https://cdn.datatables.net/buttons/1.5.2/js/buttons.flash.min.js"></script>
    <script type="text/javascript" language="javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
    <script type="text/javascript" language="javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/pdfmake.min.js"></script>
    <script type="text/javascript" language="javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/vfs_fonts.js"></script>
    <script type="text/javascript" language="javascript" src="https://cdn.datatables.net/buttons/1.5.2/js/buttons.html5.min.js"></script>
    <script type="text/javascript" language="javascript" src="https://cdn.datatables.net/buttons/1.5.2/js/buttons.print.min.js"></script>
<script>    $('#example').DataTable( {
        dom: 'Bfrtip',
        buttons: [

            {extend:'excel',action:newExportAction}
        ],
           "processing": true,
         "serverSide": true,
         "ajax": "http://localhost/data/verify/getDataEmployeeFromMantra"

    } );</script>
  <table id="example" class="display" cellspacing="0" width="100%">
                      <thead>
                          <tr>
                                <th>No Employee</th>
                              <th>Tanggal Lahir</th>
                              <th>Firstname</th>
                              <th>Lastname</th>
                              <th>Gender</th>
                              <th>Hiredate</th>
                          </tr>
                      </thead>
                      <tfoot>
                          <tr>
                            <th>No Employee</th>
                          <th>Tanggal Lahir</th>
                          <th>Firstname</th>
                          <th>Lastname</th>
                          <th>Gender</th>
                          <th>Hiredate</th>
                          </tr>
                      </tfoot>
                  </table>

知道为什么 adminlte 中缺少导出按钮吗？已经包含引导按钮buttons.bootstrap.min.js

【问题讨论】：

你检查控制台了吗？也许你会从那里得到提示。
还有一件事你在哪里定义了newExportAction函数？
已经定义了 newExportAction 并且控制台开发人员没有错误，我会尝试重新部署 adminlte，可能它与来自 admin lte 的数据表冲突:(

标签： php jquery datatables

【解决方案1】：

试试这个 - 在这个标签中添加你的外部 js 文件以使用 adminLTE：

@section('js') 
<script src="https://cdn.datatables.net/buttons/1.5.2/js/dataTables.buttons.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.5.2/js/buttons.html5.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
@stop

【讨论】：

【解决方案2】：

我添加了以下内容，它对我来说就像魅力一样。

[在标题处]

<link rel="stylesheet" href="https://cdn.datatables.net/buttons/1.4.1/css/buttons.dataTables.min.css">

[在页脚底部]

<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.6.1/js/dataTables.buttons.min.js"></script> 
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/pdfmake.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/vfs_fonts.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.6.1/js/buttons.html5.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.6.1/js/buttons.print.min.js"></script>

这些脚本是 18-04-2020 的最新版本

【讨论】：