Laravel 冲突的脚本,Bootstrap
Laravel Conflicting Scripts, Bootstrap
在我当前的 Laravel 项目中,我正在使用(尝试)Bootstrap 和 MDBoostrap。目前,我收到错误 TypeError: $(...).DataTable is not a function
并通过在线阅读,这通常是由于 jquery 被多次调用。我认为该错误与 app.js 有关,但如果我只包含脚本 Bootstraps 所需的数据表,我会收到 $ 未定义的错误。注意:index.blade.html 是从 app.blade.html 延伸而来的。对于 Laravel,我只是尝试使用 MDB 创建数据表。这可能与 here 重复,但此问题从未得到解答。我一整天都在为这个问题苦苦思索,欢迎任何意见。
app.blade.html
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="{{asset('css/app.css')}}">
<title>Laravel Project</title>
</head>
<body>
<div class="container">
@yield('content')
</div>
<script src="{{asset('js/app.js')}}"></script>
<script>
// Material Design example
$(document).ready(function () {
$('#dtMaterialDesignExample').DataTable();
$('#dtMaterialDesignExample_wrapper').find('label').each(function () {
$(this).parent().append($(this).children());
});
$('#dtMaterialDesignExample_wrapper .dataTables_filter').find('input').each(function () {
const $this = $(this);
$this.attr("placeholder", "Search");
$this.removeClass('form-control-sm');
});
$('#dtMaterialDesignExample_wrapper .dataTables_length').addClass('d-flex flex-row');
$('#dtMaterialDesignExample_wrapper .dataTables_filter').addClass('md-form');
$('#dtMaterialDesignExample_wrapper select').removeClass('custom-select custom-select-sm form-control form-control-sm');
$('#dtMaterialDesignExample_wrapper select').addClass('mdb-select');
$('#dtMaterialDesignExample_wrapper .mdb-select').materialSelect();
$('#dtMaterialDesignExample_wrapper .dataTables_filter').find('label').remove();
});
</script>
</body>
</html>
index.blade.html
@extends('layouts.app')
@section('content')
<h1>User Table</h1>
@if(count($users) > 0)
<table id="dtMaterialDesignExample" class="table" cellspacing="0" width="100%">
<thead>
<tr>
<th class="th-sm">ID
</th>
<th class="th-sm">Name
</th>
<th class="th-sm">Occupation
</th>
<th class="th-sm">Location
</th>
<th class="th-sm">Salary
</th>
</tr>
</thead>
<tbody>
@foreach($users as $user)
<tr>
<td>{{$user->id}}</td>
<td>{{$user->name}}</td>
<td>{{$user->occupation}}</td>
<td>{{$user->location}}</td>
<td>{{$user->salary}}</td>
</tr>
@endforeach
</tbody>
</table>
@endif
@endsection
UsersController.php
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\User;
class UsersController extends Controller
{
/**
* Display a listing of the resource.
*
* @return \Illuminate\Http\Response
*/
public function index()
{
$users = User::orderBy('id', 'asc')->paginate(10);
return view('users.index',['users'=>$users]);
}
bootstrap.js
try {
window.Popper = require('popper.js').default;
window.$ = window.jQuery = require('jquery');
require('bootstrap');
require('mdbootstrap');
} catch (e) {}
app.js
require('./bootstrap');
var moment = require('mdbootstrap');
app.scss
// Fonts
@import url('https://fonts.googleapis.com/css?family=Nunito');
// Variables
@import 'variables';
// Bootstrap
@import '~bootstrap/scss/bootstrap';
// MDBootstrap
@import '~mdbootstrap/css/mdb.min.css';
如果这是 DataTables.net 包,我相信您必须包括 JS,可能还包括 CSS 才能使 $('#dtMaterialDesignExample').DataTable();
成功。我知道那些没有开箱即用的 Bootstrap。我有一个使用 vanilla Bootstrap 的 Laravel 包,我必须包含 JS 和 CSS 来呈现数据表。
我对 MDB 不是很熟悉。他们可能提供CSS,但我不知道他们是否提供JS。看起来你不应该有一个重复的定义,所以你需要确保你的应用程序正在向浏览器呈现如下内容:
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.21/css/jquery.dataTables.min.css"/>
<script src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js" type="text/javascript"></script>
这将包括 DataTable() 函数的 JS 定义。
在我当前的 Laravel 项目中,我正在使用(尝试)Bootstrap 和 MDBoostrap。目前,我收到错误 TypeError: $(...).DataTable is not a function
并通过在线阅读,这通常是由于 jquery 被多次调用。我认为该错误与 app.js 有关,但如果我只包含脚本 Bootstraps 所需的数据表,我会收到 $ 未定义的错误。注意:index.blade.html 是从 app.blade.html 延伸而来的。对于 Laravel,我只是尝试使用 MDB 创建数据表。这可能与 here 重复,但此问题从未得到解答。我一整天都在为这个问题苦苦思索,欢迎任何意见。
app.blade.html
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="{{asset('css/app.css')}}">
<title>Laravel Project</title>
</head>
<body>
<div class="container">
@yield('content')
</div>
<script src="{{asset('js/app.js')}}"></script>
<script>
// Material Design example
$(document).ready(function () {
$('#dtMaterialDesignExample').DataTable();
$('#dtMaterialDesignExample_wrapper').find('label').each(function () {
$(this).parent().append($(this).children());
});
$('#dtMaterialDesignExample_wrapper .dataTables_filter').find('input').each(function () {
const $this = $(this);
$this.attr("placeholder", "Search");
$this.removeClass('form-control-sm');
});
$('#dtMaterialDesignExample_wrapper .dataTables_length').addClass('d-flex flex-row');
$('#dtMaterialDesignExample_wrapper .dataTables_filter').addClass('md-form');
$('#dtMaterialDesignExample_wrapper select').removeClass('custom-select custom-select-sm form-control form-control-sm');
$('#dtMaterialDesignExample_wrapper select').addClass('mdb-select');
$('#dtMaterialDesignExample_wrapper .mdb-select').materialSelect();
$('#dtMaterialDesignExample_wrapper .dataTables_filter').find('label').remove();
});
</script>
</body>
</html>
index.blade.html
@extends('layouts.app')
@section('content')
<h1>User Table</h1>
@if(count($users) > 0)
<table id="dtMaterialDesignExample" class="table" cellspacing="0" width="100%">
<thead>
<tr>
<th class="th-sm">ID
</th>
<th class="th-sm">Name
</th>
<th class="th-sm">Occupation
</th>
<th class="th-sm">Location
</th>
<th class="th-sm">Salary
</th>
</tr>
</thead>
<tbody>
@foreach($users as $user)
<tr>
<td>{{$user->id}}</td>
<td>{{$user->name}}</td>
<td>{{$user->occupation}}</td>
<td>{{$user->location}}</td>
<td>{{$user->salary}}</td>
</tr>
@endforeach
</tbody>
</table>
@endif
@endsection
UsersController.php
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\User;
class UsersController extends Controller
{
/**
* Display a listing of the resource.
*
* @return \Illuminate\Http\Response
*/
public function index()
{
$users = User::orderBy('id', 'asc')->paginate(10);
return view('users.index',['users'=>$users]);
}
bootstrap.js
try {
window.Popper = require('popper.js').default;
window.$ = window.jQuery = require('jquery');
require('bootstrap');
require('mdbootstrap');
} catch (e) {}
app.js
require('./bootstrap');
var moment = require('mdbootstrap');
app.scss
// Fonts
@import url('https://fonts.googleapis.com/css?family=Nunito');
// Variables
@import 'variables';
// Bootstrap
@import '~bootstrap/scss/bootstrap';
// MDBootstrap
@import '~mdbootstrap/css/mdb.min.css';
如果这是 DataTables.net 包,我相信您必须包括 JS,可能还包括 CSS 才能使 $('#dtMaterialDesignExample').DataTable();
成功。我知道那些没有开箱即用的 Bootstrap。我有一个使用 vanilla Bootstrap 的 Laravel 包,我必须包含 JS 和 CSS 来呈现数据表。
我对 MDB 不是很熟悉。他们可能提供CSS,但我不知道他们是否提供JS。看起来你不应该有一个重复的定义,所以你需要确保你的应用程序正在向浏览器呈现如下内容:
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.21/css/jquery.dataTables.min.css"/>
<script src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js" type="text/javascript"></script>
这将包括 DataTable() 函数的 JS 定义。