在 Laravel Mix 中使用带有 DataTables 的 Admin-LTE 3 未显示分页

Question

我正在尝试使用 Admin-LTE 3 (Bootstrap 4) 中包含的 DataTables 插件，但似乎找不到该插件。

页面目前的样子：

但我希望它看起来像：

其他一切看起来都“正常”，应该如此，例如单击页面或排序，但样式被机器人替换为 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

您的文件路径错误。

为了正确导入 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";

Answer 2

删除这个

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

来自您的app.js

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

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