datatable按钮导出未在adminLTE / Bootstrap中显示

时间:2018-07-27 22:40:43

标签: php jquery datatables

您好,我在AdminLte中使用数据表,并且我尝试在不使用任何管理工具的情况下使用普通html的情况下为Datatables包含导出按钮 enter image description here 但是当我尝试将其与ADMINLTE集成时,缺少这样的导出按钮 enter image description here 我的代码就是这样

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

你知道为什么导出按钮在管理中丢失了吗?已包含引导程序按钮buttons.bootstrap.min.js

2 个答案:

答案 0 :(得分:0)

尝试一下-在此标记中添加外部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

答案 1 :(得分:0)

我添加了以下内容,它对我来说就像是魅​​力。

[在标题处]

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

这些脚本是2020年4月18日的最新信息