文章/答案/技术大牛

发布

社区首页 >问答首页 >MDBootstrap数据表的自动样式设置不正确

问MDBootstrap数据表的自动样式设置不正确
EN

Stack Overflow用户

提问于 2020-07-06 14:31:33

回答 1查看 336关注 0票数 0

在我的Laravel项目中，我使用MDBootstrap来设置数据表的样式。但是，当在我的页面底部运行下面的脚本来创建数据表时，包含的Search function和pagination没有样式化，也没有向它们添加类。左上角的"Show Entries"按钮也不会被MDB设置样式。看看第一个example on Bootstrap网页，搜索功能会自动设置样式，分页会使用与我包含的脚本和样式相同的按钮设置样式。你有没有发现我可能遗漏了什么？

        // 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

Stack Overflow用户

发布于 2020-07-07 09:32:22

事实证明，样式方面缺少了更多的脚本。在我的脚本之后包含以下脚本之后，在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>

票数 0

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

原文链接：

https://stackoverflow.com/questions/62750421

复制

相似问题

问MDBootstrap数据表的自动样式设置不正确
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问MDBootstrap数据表的自动样式设置不正确EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问MDBootstrap数据表的自动样式设置不正确
EN