javascript - 带有导出按钮的 Laravel 和 Html DataTable 不显示或不显示

Question

为什么我的页面上没有显示或显示PDF、EXCEL CSV等导出按钮？

这是我的 table 的样子

Imgur image of table

这是我的js链接

Imgur image of js links

    <table class="table" id="table_id">
        <thead>
          <tr>
            <th>EMPLOYEE NO.</th>
            <th>NAME</th>
            <th>DATE</th>
            <th>TIME IN</th>
            <th>TIME OUT</th>
            <th>TOTAL HOURS</th>
            <th>STATUS</th>

          </tr>
        </thead>
        <tbody>

                @foreach ($employeeSched as $setTime)
          <tr>
            <td><b>{{ $setTime->employee_no }}</b></td>
            <td><b>{{ $setTime->last_name }}, {{ $setTime->first_name }}</b></td>
             <td><b>{{Form::label('date_today', $setTime->date_today)}}</b></td>

             <td><input type="time" name="schedules[{{ $setTime->id }}][timeIn]" class="form-control col-md-11" value='{{ $setTime->time_in }}'></td>

            <td><input type="time" name="schedules[{{ $setTime->id }}][timeOut]" class="form-control col-md-11" value='{{ $setTime->time_out }}'></td>
            </td>
          </tr>
          @endforeach



        </tbody>
</table>

{{ $employeeSched->links() }}

和我的脚本

@section('script')


<script type="text/javascript">
 $(document).ready(function() {
   $('#table_id').DataTable({
       dom: 'Bfrtip',
       buttons: [
           'copy', 'csv', 'excel', 'pdf', 'print'
       ]
   });
});
</script>

在我的app.blade.php中，这是我的链接

脚本的链接

{!! Html::script('js/datatable/dataTables.buttons.min.js') !!}
{!! Html::script('js/datatable/buttons.flash.min.js') !!}
{!! Html::script('js/datatable/jszip.min.js') !!}
{!! Html::script('js/datatable/pdfmake.min.js') !!}
{!! Html::script('js/datatable/vfs_fonts.js') !!}
{!! Html::script('js/datatable/buttons.html5.min.js') !!}
{!! Html::script('js/datatable/buttons.print.min.js') !!}

css 的链接

{!! Html::style('css/buttons.dataTables.min.css') !!}
{!! Html::style('css/jquery.dataTables.min.css') !!}

Answer 1

我认为你的数据表不工作。因为你没有相同数量的 <th> and <td> .制作相同数量的 th 和 td 标签。并在它们出现时连续使用波纹管脚本。

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.2/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.36/pdfmake.min.js
https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/vfs_fonts.js
https://cdn.datatables.net/buttons/1.5.2/js/buttons.html5.min.js

CSS

https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css
https://cdn.datatables.net/buttons/1.5.2/css/buttons.dataTables.min.css

和你的脚本:

@section('script')


<script type="text/javascript">
 $(document).ready(function() {
   $('#table_id').DataTable({
       dom: 'Bfrtip',
       buttons: [
           'copyHtml5','excelHtml5','csvHtml5','pdfHtml5','print'
       ]
   });
});
</script>
@endsection