文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >在Laravel中使用MDBootstrap？

问在Laravel中使用MDBootstrap？
EN

Stack Overflow用户
提问于 2020-07-02 08:21:01
回答 2查看 805关注 0票数 0

几天来，我一直在尝试在我的Laravel项目中使用MDBootstrap。我特别想创建MDBootstrap数据表。我已经成功地安装了MDB和npm和yarn，但是当我试图访问index.blade.html页面时，在我的web浏览器控制台的$(document)上得到了一个jquery error ReferenceError: $。此索引页是从包含Bootstrap's webpage over MDB Data Tables所需脚本的app.blade.html扩展而来的。我直接下载了MBD并测试了他们的数据表，index.html运行得天衣无缝。我对Laravel (和PHP)还很陌生，所以如果有任何建议，我将不胜感激。

app.blade.html

代码语言：javascript
复制
<!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')}}">
    <!-- MDB icon -->
    <link rel="icon" href="{{asset('node_modules/img/mdb-favicon.ico')}}" type="image/x-icon">
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.11.2/css/all.css">
    <!-- Google Fonts Roboto -->
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap">
    <!-- Bootstrap core CSS -->
    <link rel="stylesheet" href="{{asset('node_modules/css/bootstrap.min.css')}}">
    <!-- Material Design Bootstrap -->
    <link rel="stylesheet" href="{{asset('node_modules/css/mdb.min.css')}}">
    <!-- Your custom styles (optional) -->
    <link rel="stylesheet" href="{{asset('node_modules/css/style.css')}}">
    <!-- MDBootstrap Datatables  -->
    <link href="{{asset('node_modules/css/addons/datatables2.min.css')}}" rel="stylesheet">
    <title>Laravel Project</title>

</head>
<body>
    <div class="container">
    @yield('content')
    </div>

    <!-- jQuery -->
    <script type="text/javascript" src="{{asset('node_modules/js/jquery.min.js')}}"></script>
    <!-- Bootstrap tooltips -->
    <script type="text/javascript" src="{{asset('node_modules/js/popper.min.js')}}"></script>
    <!-- Bootstrap core JavaScript -->
    <script type="text/javascript" src="{{asset('node_modules/js/bootstrap.min.js')}}"></script>
    <!-- MDB core JavaScript -->
    <script type="text/javascript" src="{{asset('node_modules/js/mdb.min.js')}}"></script>
    <!-- Your custom scripts (optional) -->
    <script type="text/javascript"></script>
    <!-- MDBootstrap Datatables  -->
    <script type="text/javascript" src="{{asset('node_modules/js/addons/datatables2.min.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

代码语言：javascript
复制
@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

代码语言：javascript
复制
<?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);
    }
php
jquery
laravel
EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2020-07-04 13:30:36

正如我痛苦地发现的那样，在Laravel中使用MDBootstrap有时可能有点麻烦，但在我能够正确地引用所需的js文件(使用Laravel Mix)之后，我让我的数据表正常工作并具有正确的样式。在设置样式时，我忽略了使用app.sass，因为当时我还不知道它的功能。但是，在包含了其他脚本之后，有一段时间mdb.min.js仍然会抛出"TypeError："exports“is read-only”错误，我通过从公共文件夹中删除js文件并重新编译来解决这个错误。

票数 0
EN

Stack Overflow用户

发布于 2020-07-02 09:29:31

如果您是使用npm安装的，那么您需要首先运行

代码语言：javascript
复制
npm install

在那之后

代码语言：javascript
复制
npm run dev

在此之后，您需要将您的文件包括在内

代码语言：javascript
复制
<!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')}}">

    <link href="{{asset('css/app.css')}}" rel="stylesheet">
    <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>

还要检查您的控制器是否存在此行的拼写错误。

代码语言：javascript
复制
 return view('users.index',['users'=>$users);

这应该是

代码语言：javascript
复制
 return view('users.index',['users'=>$users]);

除了上述内容之外，请转到resources/bootstrap.php并包含以下内容

代码语言：javascript
复制
try{
window.$ = window.jQuery = require('jquery');
require('bootstrap')
//to get the exact name for the bootstrap, go to package.json and copy out the //name for mdbootstrap exactly


require('name_for_mdboostrap')
    }catch(e){}

然后再次运行npm run dev重新编译

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/62687132

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档