Datatable in laravel mix

Question

I have some problem, and I was search for solving this problem, but I still didn't get the solving, I hope Anyone can help me to solve this problem, I put my code in below, Thanks :

webpack.mix.js :

mix.autoload({
 jquery: ['$', 'jQuery', 'window.jQuery'],
})

mix.scripts([
  .js('resources/js/app.js', 'public/js').version()
  .js('resources/js/bootstrap.js', 'public/js').version()
  .js('resources/js/occupant.js', 'public/js').version()
  .sass('resources/sass/app.scss', 'public/css').version()
]);

bootstrap.js :

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

  require('bootstrap');

  require('../../node_modules/datatables.net/js/jquery.dataTables.js');
  require('../../node_modules/datatables.net-bs4/js/dataTables.bootstrap4.js');
} catch (e) {}

occupant.js :

var $ = require('jquery');

$(document).ready(function () {
   $("#tblOccupant").DataTable(function () {
      
   });
});

my console error :

occupant.js?id=043c6fbba06b4c7cd537:10984 Uncaught TypeError: $(...).DataTable is not a function

Answer 1

Your app is not able to locate datatables try following way to get it work

Instal depedencies via npm

npm install datatables.net-bs4

then

npm install datatables.net-buttons-bs4

add them to resources/js/bootstrap.js like

require('datatables.net-bs4');
require('datatables.net-buttons-bs4');

Edit resources/scss/app.scss and add the following:

// DataTables
@import "~datatables.net-bs4/css/dataTables.bootstrap4.css";
@import "~datatables.net-buttons-bs4/css/buttons.bootstrap4.css";

Make sure your webpack.mix.js contains

mix.js('resources/js/app.js', 'public/js')
    .sass('resources/sass/app.scss', 'public/css');

and you have added

    
    <link href="{{asset(mix('css/app.css'))}}" rel="stylesheet">

in the head of html and

  <script src="{{asset(mix('js/app.js'))}}"></script>

just before closing </body> tag

then run npm run watch or npm run dev