javascript - Laravel 8 - scripts for datatable not working
I am using AdminBSB template for practice, and Jquery datatable plugin JS not working in my blade template
I want to make datatable looks like this:
but exportable, search, and pagination function in mytable not working like this: 
this is sample of my code for script:
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
Solution:
I got this issue before. I changed
@section('scripts') ... @endsection
to
@push('scripts') ... @endpush
In admin-master.blade.php, I changed:
@yield('script') to @stack('script')