数据表在laravel刀片文件中无法正确显示

时间:2018-07-12 13:35:09

标签: laravel datatable

我在数据库中遇到了一个问题。我在laravel刀片文件中添加了数据表,但是当我单击菜单时(称为刀片文件)。然后,它显示一个普通表,但是当我再次刷新同一页面时,它正确显示了数据表。我的问题是,当我单击菜单(调用刀片文件)时,为什么它不能正确显示数据表。它仅显示一个普通表。如何解决这个问题。

请检查图像this image is before refresh

this image is after refresh

这是我的刀片文件

@extends('backEnd.layout')


        <!--page level css starts-->
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.12/css/dataTables.bootstrap.min.css">
<!--end of page level css-->



@section('content')
    <div class="padding">
        <div class="box">
            <div class="box-header dker">
                <h3>Product List</h3>
                <small>
                    <a href="{{ route('adminHome') }}">{{ trans('backLang.home') }}</a> /
                    <a href="#">Product List</a>
                </small>
            </div>
            <table class="table table-bordered" id="table"  >
                <thead class=" primary">
                <tr >
                    <th class="text-center">Category</th>
                    <th class="text-center">Title</th>
                    <th class="text-center">Make</th>
                    <th class="text-center">Rate</th>
                    <th class="text-center">Status</th>
                </tr>
                </thead>
                <tbody>
                @foreach($records as $record)
                    <tr>
                        <td class="text-center">{{$record->section_title}}</td>
                        <td class="text-center">{{$record->title_en}}</td>
                        <td class="text-center">{{$record->make}}</td>
                        <td class="text-center">{{$record->rate}}</td>
                        <td class="text-center">@if($record->status != 1) Used
                        @else New @endif
                        </td>
                    </tr>
                @endforeach
                </tbody>
            </table>
        </div>
    </div>
@endsection
@section('footerInclude')
    <script type="text/javascript">
        $("#checkAll").click(function () {
            $('input:checkbox').not(this).prop('checked', this.checked);
        });
        $("#action").change(function () {
            if (this.value == "delete") {
                $("#submit_all").css("display", "none");
                $("#submit_show_msg").css("display", "inline-block");
            } else {
                $("#submit_all").css("display", "inline-block");
                $("#submit_show_msg").css("display", "none");
            }
        });
    </script>

    <script>
        $(document).ready(function() {
            $('#table').DataTable();
        } );
    </script>

    <script src="//code.jquery.com/jquery-1.12.3.js"></script>
    <script src="//cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/1.10.12/js/dataTables.bootstrap.min.js"></script>

@endsection

任何帮助将不胜感激。 预先感谢。

1 个答案:

答案 0 :(得分:1)

您的Blade文件应该是这样的。 您应该在编写脚本之前添加脚本文件。

  @extends('backEnd.layout')


<!--page level css starts-->
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.12/css/dataTables.bootstrap.min.css">
<!--end of page level css-->



@section('content')
<div class="padding">
    <div class="box">
        <div class="box-header dker">
            <h3>Product List</h3>
            <small>
                <a href="{{ route('adminHome') }}">{{ trans('backLang.home') }}</a> /
                <a href="#">Product List</a>
            </small>
        </div>
        <table class="table table-bordered" id="table"  >
            <thead class=" primary">
                <tr >
                    <th class="text-center">Category</th>
                    <th class="text-center">Title</th>
                    <th class="text-center">Make</th>
                    <th class="text-center">Rate</th>
                    <th class="text-center">Status</th>
                </tr>
            </thead>
            <tbody>
                @foreach($records as $record)
                <tr>
                    <td class="text-center">{{$record->section_title}}</td>
                    <td class="text-center">{{$record->title_en}}</td>
                    <td class="text-center">{{$record->make}}</td>
                    <td class="text-center">{{$record->rate}}</td>
                    <td class="text-center">@if($record->status != 1) Used
                        @else New @endif
                    </td>
                </tr>
                @endforeach
            </tbody>
        </table>
    </div>
</div>

<script src="//code.jquery.com/jquery-1.12.3.js"></script>
<script src="//cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.12/js/dataTables.bootstrap.min.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $('#table').DataTable();
        $("#checkAll").click(function () {
            $('input:checkbox').not(this).prop('checked', this.checked);
        });
        $("#action").change(function () {
            if (this.value == "delete") {
                $("#submit_all").css("display", "none");
                $("#submit_show_msg").css("display", "inline-block");
            } else {
                $("#submit_all").css("display", "inline-block");
                $("#submit_show_msg").css("display", "none");
            }
        });
    } ;

</script>
@section('footerInclude')
@endsection