MDBootstrap 数据表未正确自动设置样式答案

【问题标题】：MDBootstrap Datatable Not Auto-styling CorrectlyMDBootstrap 数据表未正确自动设置样式
【发布时间】：2020-10-26 05:52:35
【问题描述】：

在我的 Laravel 项目中，我使用 MDBootstrap 来设置数据表的样式。但是，当在我的页面底部运行以下脚本来创建数据表时，包含的 Search function 和 pagination 不会设置样式，也不会添加类。左上角的 "Show Entries" 按钮也不会被 MDB 设置样式。查看 Bootstrap 网页上的第一个 example，搜索功能会自动设置样式，并且分页会使用与我包含的相同脚本和样式的按钮进行样式设置。你看到我可能遗漏的任何东西吗？

        // Material Design example
        $(document).ready(function () {
            $('#dtBasicExample').DataTable({
                "order": [[ 1, "asc" ]]
            });
            $('.dataTables_length').addClass('bs-select');
        });
    </script>

index.blade.php

@extends('layouts.app')
@section('content')

    <div class="float-left">
        <a href="/" class="btn btn-light-blue">
            <i class="fa fa-arrow-left" aria-hidden="true"></i>
        </a>
    </div>
    <table id="dtBasicExample" class="table" width="100%">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
</table> 
@endsection
@section('scripts')
    <script src="{{asset('js/jquery.min.js')}}"></script>
    <script src="{{asset('js/popper.min.js')}}"></script>
    <script src="{{asset('js/bootstrap.min.js')}}"></script>
    <script src="{{asset('js/datatables2.min.js')}}"></script>
    <script>
        // Material Design example
        $(document).ready(function () {
            $('#dtBasicExample').DataTable({
                "order": [[ 1, "asc" ]]
            });
            $('.dataTables_length').addClass('bs-select');
        });
    </script>
@endsection

app.scss

// Fonts
@import url('https://fonts.googleapis.com/css?family=Nunito');
@import url('https://use.fontawesome.com/releases/v5.11.2/css/all.css');

// Bootstrap
//@import '~bootstrap/scss/bootstrap';

// MDBootstrap
@import '~mdbootstrap/css/bootstrap.min.css';
@import '~mdbootstrap/css/mdb.min.css';
@import '~mdbootstrap/css/addons/datatables2.min.css';

//Awesome Font
@import '~font-awesome/css/font-awesome.min.css';

app.blade.php

<!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>Datatable Test</title>

</head>
<body>
<div class="container">
    <br>
    @include('inc.messages')
    @yield('content')
</div>
<script src="{{asset('js/app.js')}}"></script>
    @yield('scripts')

</body>
</html>

bootstrap.js

window._ = require('lodash');

/**
 * We'll load jQuery and the Bootstrap jQuery plugin which provides support
 * for JavaScript based Bootstrap features such as modals and tabs. This
 * code may be modified to fit the specific needs of your application.
 */

try {
    window.Popper = require('popper.js').default;
    window.$ = window.jQuery = require('jquery');

    // require('bootstrap');
    require('./../../node_modules/mdbootstrap/js/jquery.min.js');
    require('./../../node_modules/mdbootstrap/js/popper.min.js');
    require('./../../node_modules/mdbootstrap/js/bootstrap.min.js');
    require('./../../node_modules/mdbootstrap/js/mdb.min.js');
    require('./../../node_modules/mdbootstrap/js/addons/datatables2.min.js');

} catch (e) {}


/**
 * We'll load the axios HTTP library which allows us to easily issue requests
 * to our Laravel back-end. This library automatically handles sending the
 * CSRF token as a header based on the value of the "XSRF" token cookie.
 */

window.axios = require('axios');

window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';

/**
 * Echo exposes an expressive API for subscribing to channels and listening
 * for events that are broadcast by Laravel. Echo and event broadcasting
 * allows your team to easily build robust real-time web applications.
 */

// import Echo from 'laravel-echo';

// window.Pusher = require('pusher-js');

// window.Echo = new Echo({
//     broadcaster: 'pusher',
//     key: process.env.MIX_PUSHER_APP_KEY,
//     cluster: process.env.MIX_PUSHER_APP_CLUSTER,
//     forceTLS: true
// });

webpack.mix.js

const mix = require('laravel-mix');

/*
 |--------------------------------------------------------------------------
 | Mix Asset Management
 |--------------------------------------------------------------------------
 |
 | Mix provides a clean, fluent API for defining some Webpack build steps
 | for your Laravel application. By default, we are compiling the Sass
 | file for the application as well as bundling up all the JS files.
 |
 */

mix.js('resources/js/app.js', 'public/js')
    .sass('resources/sass/app.scss', 'public/css')
    .js('node_modules/mdbootstrap/js/jquery.min.js', 'public/js')
    .js('node_modules/mdbootstrap/js/popper.min.js', 'public/js')
    .js('node_modules/mdbootstrap/js/bootstrap.min.js', 'public/js')
    .js('node_modules/mdbootstrap/js/addons/datatables2.min.js', 'public/js');

【问题讨论】：

标签： css laravel bootstrap-4 mdbootstrap

【解决方案1】：

事实证明，样式设计缺少更多脚本。在我的脚本之后和 index.blade.app 底部的 DataTable 函数之前包含以下脚本后，创建了我正在寻找的样式。

    <!-- Datatable Scripts -->
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/1.10.21/js/dataTables.bootstrap4.min.js"></script>
    <script>

【讨论】：