DataTables 的引导程序未在 Laravel 中显示
Posted
技术标签:
【中文标题】DataTables 的引导程序未在 Laravel 中显示【英文标题】：DataTables' Bootstrap Not showing in 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 【参考方案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关闭
【讨论】：
以上是关于DataTables 的引导程序未在 Laravel 中显示的主要内容，如果未能解决你的问题，请参考以下文章
使用带有引导程序的 dataTables 将自定义控件附加到 dom