分页未显示在Laravel Mix中将Admin-LTE 3与DataTables一起使用

Question

我正在尝试使用Admin-LTE 3（引导程序4）中包含的DataTables插件，但似乎找不到该插件。

当前页面如下：

但是我希望它看起来像：

其他所有内容都看起来不错，例如，单击页面或进行排序，但样式已被bot替代了Bootstrap 4。

因此，似乎bootstrap.datatables从未添加到主插件中：

目前我的webpack.mix.js如下：

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

在app.js中，它具有：

// Import and set jQuery
global.$ = global.jQuery = require('jquery');
// Import bootstrap
require('bootstrap');
// Import datatables
require('admin-lte/plugins/datatables/jquery.dataTables');
require('admin-lte/plugins/datatables/dataTables.bootstrap4');
// Import admin-lte-3
require('admin-lte');

在app.scss上，我拥有：

// Import Google Font: Source Sans Pro
@import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700');
// Import datatatables
@import '~admin-lte/plugins/datatables/dataTables.bootstrap4';
// Import admin-lte-3
@import '~admin-lte/dist/css/adminlte.css';

有什么想法吗？

Answer 1

删除此

require('admin-lte/plugins/datatables/dataTables.bootstrap4.css');

您的app.js中的

然后以这种样式resources/scss/app.scss添加文件

@import '~admin-lte/plugins/datatables/dataTables.bootstrap4';

Answer 2

文件路径错误。

为了正确导入DataTables插件，您应该具有：

// JS
require("admin-lte/plugins/datatables/jquery.dataTables");
require("admin-lte/plugins/datatables-bs4/js/dataTables.bootstrap4");

// CSS
@import "~admin-lte/plugins/datatables-bs4/css/dataTables.bootstrap4";