laravel mix 中的数据表答案

【问题标题】：Datatable in laravel mixlaravel mix 中的数据表
【发布时间】：2020-12-25 15:47:27
【问题描述】：

我有一些问题，我正在寻找解决这个问题，但我仍然没有得到解决，希望任何人都可以帮助我解决这个问题，我把我的代码放在下面，谢谢：

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 () {
      
   });
});

我的控制台错误：

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

【问题讨论】：

标签： javascript laravel bootstrap-4 datatables

【解决方案1】：

您的应用无法找到数据表，请尝试以下方式使其工作

通过 npm 安装依赖项

npm install datatables.net-bs4

然后

npm install datatables.net-buttons-bs4

将它们添加到resources/js/bootstrap.js 喜欢

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

编辑resources/scss/app.scss 并添加以下内容：

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

确保您的 webpack.mix.js 包含

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

你已经添加了

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

在html的头部和

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

就在关闭</body>标签之前

然后运行npm run watch 或npm run dev

【讨论】：