Laravel&Html DataTable 与导出按钮不显示或显示

Question

为什么我的导出按钮之类

这是我的桌子的样子

表的imgur图像

这是我的JS链接

imgur js链接的图像

    <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标签。还可以在出现时串行使用Bellow脚本。

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