Question

我正在使用 AdminBSB 模板进行练习，而 Jquery 数据表插件 JS 在我的刀片模板中不起作用

我想让数据表看起来像这样：

但 mytable 中的可导出、搜索和分页功能无法像这样工作：

这是我的脚本代码示例：

posts/index.blade.php：

<x-admin-master>
    
    @section('content')

    
        <!--   T A B E L   --->
        <div class="container-fluid">
            <div class="block-header">
                <h2>
                    JQUERY DATATABLES USER
                    <small>Taken from <a href="https://datatables.net/" target="_blank">datatables.net</a></small>
                </h2>
            </div>
            <!-- Exportable table Examples -->
            <div class="row clearfix">
                <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                    <div class="card">
                        <div class="header">
                            <h2>
                                All Post
                            </h2>
                            
                        </div>
                        <div class="body">
                            <div class="table-responsive">
                                <table id="tableCategory" class="table table-bordered table-striped table-hover dataTable js-exportable">
                                    <thead>
                                        <tr>
                                            <th>XXX</th>
                                            <th>XXX</th>
                                            <th>XXX</th>
                                        </tr>
                                    </thead>
                                    <tfoot>
                                        <tr>
                                            <th>XXX</th>
                                            <th>XXX</th>
                                            <th>XXX</th>
                                        </tr>
                                    </tfoot>
                                    <tbody>                                    
                                        <tr>
                                            <th>XXX</th>
                                            <th>XXX</th>
                                            <th>XXX</th>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- #END# Basic Examples -->
        </div>
        <!--   END - T A B E L   --->

    @endsection

   
    @section('scripts')


        <!-- Jquery DataTable Plugin Js -->
        <script src="{{asset('plugins/jquery-datatable/jquery.dataTables.js')}}"></script>
        <script src="{{asset('plugins/jquery-datatable/skin/bootstrap/js/dataTables.bootstrap.js')}}"></script>
        <script src="{{asset('plugins/jquery-datatable/extensions/export/dataTables.buttons.min.js')}}"></script>
        <script src="{{asset('plugins/jquery-datatable/extensions/export/buttons.flash.min.js')}}"></script>
        <script src="{{asset('plugins/jquery-datatable/extensions/export/jszip.min.js')}}"></script>
        <script src="{{asset('plugins/jquery-datatable/extensions/export/pdfmake.min.js')}}"></script>
        <script src="{{asset('plugins/jquery-datatable/extensions/export/vfs_fonts.js')}}"></script>
        <script src="{{asset('plugins/jquery-datatable/extensions/export/buttons.html5.min.js')}}"></script>
        <script src="{{asset('plugins/jquery-datatable/extensions/export/buttons.print.min.js')}}"></script>

        
    @endsection

</x-admin-master>

admin-master.blade.php

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <title>Welcome To | Bootstrap Based Admin Template - Material Design</title>
    <!-- Favicon-->
    <link rel="icon" href="favicon.ico" type="image/x-icon">

    <!-- Google Fonts -->
    <link href="https://fonts.googleapis.com/css?family=Roboto:400,700&subset=latin,cyrillic-ext" rel="stylesheet" type="text/css">
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" type="text/css">

    <!-- Bootstrap Core Css -->
    <link href="{{asset('plugins/bootstrap/css/bootstrap.css')}}" rel="stylesheet">

    <!-- Waves Effect Css -->
    <link href="{{asset('plugins/node-waves/waves.css')}}" rel="stylesheet" />

    <!-- Animation Css -->
    <link href="{{asset('plugins/animate-css/animate.css')}}" rel="stylesheet" />

    <!-- Morris Chart Css-->
    <link href="{{asset('plugins/morrisjs/morris.css')}}" rel="stylesheet" />

    <!-- Custom Css -->
    <link href="{{asset('css/style.css')}}" rel="stylesheet">

    <!-- AdminBSB Themes. You can choose a theme from css/themes instead of get all themes -->
    <link href="{{asset('css/themes/all-themes.css')}}" rel="stylesheet" />

    <!-- JQuery DataTable Css -->
     <link href="{{asset('plugins/jquery-datatable/skin/bootstrap/css/dataTables.bootstrap.css')}}" rel="stylesheet">

     <!-- Bootstrap DatePicker Css -->
     <link href="{{asset('plugins/bootstrap-datepicker/css/bootstrap-datepicker.css')}}" rel="stylesheet" />

     <!-- Wait Me Css -->
     <link href="{{asset('plugins/waitme/waitMe.css')}}" rel="stylesheet" />
 
     <!-- Bootstrap Select Css -->
     <link href="{{asset('plugins/bootstrap-select/css/bootstrap-select.css')}}" rel="stylesheet" />

     <!-- Dropzone Css -->
     <link href="{{asset('plugins/dropzone/dropzone.css')}}" rel="stylesheet">

     <!-- Toastr Css -->
     <link href="{{asset('css/toastr.min.css')}}" rel="stylesheet">

</head>


</head>

<body class="theme-red">
    <!-- Page Loader -->
    <div class="page-loader-wrapper">
        <div class="loader">
            <div class="preloader">
                <div class="spinner-layer pl-red">
                    <div class="circle-clipper left">
                        <div class="circle"></div>
                    </div>
                    <div class="circle-clipper right">
                        <div class="circle"></div>
                    </div>
                </div>
            </div>
            <p>Please wait...</p>
        </div>
    </div>
    <!-- #END# Page Loader -->
    <!-- Overlay For Sidebars -->
    <div class="overlay"></div>
    <!-- #END# Overlay For Sidebars -->
    <!-- Search Bar -->
    <div class="search-bar">
        <div class="search-icon">
            <i class="material-icons">search</i>
        </div>
        <input type="text" placeholder="START TYPING...">
        <div class="close-search">
            <i class="material-icons">close</i>
        </div>
    </div>
    <!-- #END# Search Bar -->


    <!-- Top Bar -->
    <x-admin.top-nav.admin-top-navbar></x-admin.top-nav.admin-top-navbar>
    <!-- #Top Bar -->


    <section>
        <!-- Left Sidebar -->
        <x-admin.left-nav.admin-left-navbar></x-admin.left-nav.admin-left-navbar>
        <!-- #END# Left Sidebar -->

        <!-- Right Sidebar -->
        <x-admin.right-nav.admin-right-navbar></x-admin.right-nav.admin-right-navbar>        
        <!-- #END# Right Sidebar -->
    </section>

    {{-- <section class="content"> --}}
        <div class="container-fluid">
            <section class="content">
                @yield('content')
            </section>
        </div>
        
    {{-- </section> --}}
    
    
    <!-- Jquery Core Js -->
    <script src="{{asset('plugins/jquery/jquery.min.js')}}"></script>

    <!-- Bootstrap Core Js -->
    <script src="{{asset('plugins/bootstrap/js/bootstrap.js')}}"></script>

    <!-- Select Plugin Js -->
    <script src="{{asset('plugins/bootstrap-select/js/bootstrap-select.js')}}"></script>

    <!-- Slimscroll Plugin Js -->
    <script src="{{asset('plugins/jquery-slimscroll/jquery.slimscroll.js')}}"></script>

    <!-- Waves Effect Plugin Js -->
    <script src="{{asset('plugins/node-waves/waves.js')}}"></script>

    <!-- Jquery CountTo Plugin Js -->
    <script src="{{asset('plugins/jquery-countto/jquery.countTo.js')}}"></script>

    <!-- Morris Plugin Js -->
    <script src="{{asset('plugins/raphael/raphael.min.js')}}"></script>
    <script src="{{asset('plugins/morrisjs/morris.js')}}"></script>

    <!-- ChartJs -->
    <script src="{{asset('plugins/chartjs/Chart.bundle.js')}}"></script>

    <!-- Flot Charts Plugin Js -->
    <script src="{{asset('plugins/flot-charts/jquery.flot.js')}}"></script>
    <script src="{{asset('plugins/flot-charts/jquery.flot.resize.js')}}"></script>
    <script src="{{asset('plugins/flot-charts/jquery.flot.pie.js')}}"></script>
    <script src="{{asset('plugins/flot-charts/jquery.flot.categories.js')}}"></script>
    <script src="{{asset('plugins/flot-charts/jquery.flot.time.js')}}"></script>

    <!-- Sparkline Chart Plugin Js -->
    <script src="{{asset('plugins/jquery-sparkline/jquery.sparkline.js')}}"></script>

    <!-- Custom Js -->
    <script src="{{asset('js/admin.js')}}"></script>
    <script src="{{asset('js/pages/index.js')}}"></script>

    <!-- Demo Js -->
    <script src="{{asset('js/demo.js')}}"></script>

     
    @yield('scripts')      
    
    
</body>

</html>

Answer 1

我以前遇到过这个问题。我变了

@section('scripts') ... @endsection

到

@push('scripts') ... @endpush

在 admin-master.blade.php 中，我更改了：

@yield('script') to @stack('script')

Laravel 8 - 数据表脚本不起作用

1 个答案: