DataTables 的引导程序未在 Laravel 中显示答案

【问题标题】：DataTables' Bootstrap Not showing in LaravelDataTables 的引导程序未在 Laravel 中显示
【发布时间】：2016-06-06 12:12:47
【问题描述】：

我想在 laravel 中使用 Datatable 的 Bootstrap 进行高级搜索。但是它没有显示在我需要的页面中。

这是我的 app.blade.php 代码。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Todo App</title>

    <link href="{{asset('/css/app.css')}}" rel="stylesheet">

    <!-- Fonts -->
    <link href='//fonts.googleapis.com/css?family=Roboto:400,300' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdn.datatables.net/1.10.11/css/dataTables.bootstrap.min.css">
    <link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
        <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>
<body>
    <nav class="navbar navbar-default">
        <div class="container-fluid">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                    <span class="sr-only">Toggle Navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#">Laravel</a>
            </div>

            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav">
                    <li><a href="/">Todo Application</a></li>
                </ul>

                <ul class="nav navbar-nav navbar-right">
                    @if (Auth::guest())
                        <li><a href="/auth/login">Login</a></li>
                        <li><a href="/auth/register">Register</a></li>
                    @else
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">{{ Auth::user()->name }} <span class="caret"></span></a>
                            <ul class="dropdown-menu" role="menu">
                                <li><a href="/auth/logout">Logout</a></li>
                            </ul>
                        </li>
                    @endif
                </ul>
            </div>
        </div>
    </nav>
    @if(count($errors)>0)
        <div class="alert alert-danger">
            <strong>Whoops!</strong> Enter Valid Input</br>
            <ul>
                @foreach($errors->all() as $error)
                <li>{{$error}}</li>
                @endforeach
            </ul>
        </div>
    @endif
    @if(Session::has('success'))
    <div class="alert alert-success">
            {{Session::get('success')}}
    </div>
    @endif
    @yield('content')

    <!-- Scripts -->
    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.1/js/bootstrap.min.js"></script>
    <script src="code.jquery.com/jquery-1.12.0.min.js"></script>
    <script src="https://cdn.datatables.net/1.10.11/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/1.10.11/js/dataTables.bootstrap.min.js</script>
</body>
</html>

这是我的 home.blade.php，我想在其中使用 Datatables 进行搜索：

@extends('app')

@section('content')
<div class="container">
    <div class="row">
        <div class="col-md-12 ">
        <div class="col-lg-12"> 
            <div  class="col-lg-6">
            <form action="" method="POST" class="form-inline">
                <input type="hidden" name="_token" value="{{ csrf_token() }}">
                <div class="form-group">
                    <input type="text" name="name" class="form-control" placeholder="Enter a task name"></br>
                    </br>
                    <input type="submit" class="btn btn-primary" value="Save">

                </div>
            </form>
        </div>

            </div> 



            <h3> Todo Application </h3>
            <table  class="table table-striped table-bordered"  id="example">

                <tr>
                    <td>Serial No</td>
                    <td>Task Name</td>
                    <td>Status</td>
                    <td>Action</td>
                </tr>
                <?php $i=1; ?>
                @foreach($data as $row)

                    <tr>
                        <td>{{$i}}</td>
                        <td>{{$row->name }}</td>
                        <td>{{$row->status}}</td>
                        <td>
                            <a href="{{route('getEditRoute',$row->id)}}" class="btn btn-warning">Edit</a>
                            <form action="{{route('postDeleteRoute',$row->id)}}" method="POST" style="display:inline;" 
                            onsubmit="if(confirm('Are you sure?')) {return true} else {return false};">
                            <input type="hidden" name="_token" value="{{ csrf_token() }}">
                            <input type="submit" class="btn btn-danger" value="Delete">
                            </form>

                        </td>
                    </tr>
                <?php $i++; ?>

                @endforeach

            </table>
            <?php echo $data->render(); ?>
        </div>
    </div>
</div>
<script>
$(document).ready(function() {
    $('#example').DataTable();
} );
</script>
 <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
  <script>
  $(function() {
    $( "#datepicker" ).datepicker();
  });
  </script>
@endsection

【问题讨论】：

你遇到了什么错误？
仍然没有得到..@Alankar

标签： jquery twitter-bootstrap laravel datatable

【解决方案1】：

将我们所有的脚本放在主刀片中，在你的例子中是 app.blade.php。然后使用 @yield('script')

之后添加部分视图并添加用于初始化数据表的脚本

@section('script')
    <script>
        $(document).ready(function() {
            $('#example').DataTable();

        } );

    </script>
    @endsection

最后别忘了在给定的表格中添加 thead 和 tbody。

【讨论】：

【解决方案2】：

更改以下行：

<script src="https://cdn.datatables.net/1.10.11/js/dataTables.bootstrap.min.js</script>

作为

<script src="https://cdn.datatables.net/1.10.11/js/dataTables.bootstrap.min.js"></script>

来自app.blade.php 代码。

在布局中再添加一个部分

@yield('page-script','') 在</body> 标记之前。

并将您的脚本代码从home.blade.php 重写为

@section('page-script')
 <script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<script>
$(document).ready(function() {
    $('#example').DataTable();
    $( "#datepicker" ).datepicker();
} );
</script>
@stop

部分由@stop关闭

【讨论】：