[英]Datatable in laravel mix
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 : 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 : 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 :占用者.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
Your app is not able to locate datatables try following way to get it work您的应用程序无法找到数据表尝试按照以下方式使其工作
Instal depedencies via npm通过 npm 安装依赖项
npm install datatables.net-bs4
then然后
npm install datatables.net-buttons-bs4
add them to resources/js/bootstrap.js
like将它们添加到
resources/js/bootstrap.js
就像
require('datatables.net-bs4');
require('datatables.net-buttons-bs4');
Edit resources/scss/app.scss
and add the following:编辑
resources/scss/app.scss
并添加以下内容:
// 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确保你的
webpack.mix.js
包含
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在 html 的头部和
<script src="{{asset(mix('js/app.js'))}}"></script>
just before closing </body>
tag就在关闭
</body>
标签之前
then run npm run watch
or npm run dev
然后运行
npm run watch
或npm run dev
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.