Datatables Missing datatables.bundle.css (Laravel)
I followed the steps to integrate with Laravel: https://preview.keenthemes.com/seven-html-pro/documentation/getting-started/integration/laravel.html
The issue that I see is that the table is working but Datatables search input, pagination, length select box are not styled
After digging into this I found that datatables.bundle.css is not compiled in public/assets
Replies (4)
Hi,
Sorry for the delay. From mix.js(), could you please try to change mix.scripts([...]) function?
For the style, please include all these CSS files in your webpack mix using mix.sass() function.
datatables.net-bs5/css/dataTables.bootstrap5.css
datatables.net-buttons-bs5/css/buttons.bootstrap5.min.css
datatables.net-colreorder-bs5/css/colReorder.bootstrap5.min.css
datatables.net-fixedcolumns-bs5/css/fixedColumns.bootstrap5.min.css
datatables.net-fixedheader-bs5/css/fixedHeader.bootstrap5.min.css
datatables.net-responsive-bs5/css/responsive.bootstrap5.min.css
datatables.net-rowreorder-bs5/css/rowReorder.bootstrap5.min.css
datatables.net-scroller-bs5/css/scroller.bootstrap5.min.css
datatables.net-select-bs5/css/select.bootstrap5.min.css
datatables.net-datetime/dist/dataTables.dateTime.min.cssThanks
Hi,
You can manually import the datatable style file from the public folder.
'public/assets/plugins/custom/datatables/datatables.bundle.css',
'public/assets/plugins/custom/datatables/datatables.bundle.js',
Thanks
I saw the directory disappeared after adding it: 'public/assets/plugins/custom/datatables'
Any way to compile it automatically using mix like other resources are compiled when running npm run dev?
Thanks,
Tried adding the bellow code in webpack.mix.js but getting an error even those packages are installed:
ERROR in /assets/plugins/custom/datatables/datatables.bundle
Module not found: Error: Can't resolve '/app/node_modules/datatables.net-scroller-bs5/js/dataTables.bootstrap5.js' in '/app'
ERROR in /assets/plugins/custom/datatables/datatables.bundle
Module not found: Error: Can't resolve '/app/node_modules/datatables.net-select-bs5/js/dataTables.bootstrap5.js' in '/app'
From webpack.mix.js:
mix.js([
"node_modules/datatables.net/js/jquery.dataTables.js",
"node_modules/datatables.net-bs5/js/dataTables.bootstrap5.js",
"resources/src/js/vendors/plugins/datatables.init.js",
"node_modules/jszip/dist/jszip.min.js",
"node_modules/pdfmake/build/pdfmake.min.js",
"node_modules/pdfmake/build/vfs_fonts.js",
"node_modules/datatables.net-buttons/js/dataTables.buttons.min.js",
"node_modules/datatables.net-buttons-bs5/js/buttons.bootstrap5.min.js",
"node_modules/datatables.net-buttons/js/buttons.colVis.js",
"node_modules/datatables.net-buttons/js/buttons.flash.js",
"node_modules/datatables.net-buttons/js/buttons.html5.js",
"node_modules/datatables.net-buttons/js/buttons.print.js",
"node_modules/datatables.net-colreorder/js/dataTables.colReorder.min.js",
"node_modules/datatables.net-colreorder-bs5/js/colReorder.bootstrap5.js",
"node_modules/datatables.net-fixedcolumns/js/dataTables.fixedColumns.min.js",
"node_modules/datatables.net-fixedcolumns-bs5/js/fixedColumns.bootstrap5.js",
"node_modules/datatables.net-fixedheader/js/dataTables.fixedHeader.min.js",
"node_modules/datatables.net-fixedheader-bs5/js/fixedHeader.bootstrap5.js",
"node_modules/datatables.net-responsive/js/dataTables.responsive.min.js",
"node_modules/datatables.net-responsive-bs5/js/responsive.bootstrap5.min.js",
"node_modules/datatables.net-rowgroup/js/dataTables.rowGroup.min.js",
"node_modules/datatables.net-rowgroup-bs5/js/rowGroup.bootstrap5.js",
"node_modules/datatables.net-rowreorder/js/dataTables.rowReorder.min.js",
"node_modules/datatables.net-rowreorder-bs5/js/rowReorder.bootstrap5.js",
"node_modules/datatables.net-scroller/js/dataTables.scroller.min.js",
"node_modules/datatables.net-scroller-bs5/js/dataTables.bootstrap5.js",
"node_modules/datatables.net-select/js/dataTables.select.min.js",
"node_modules/datatables.net-select-bs5/js/dataTables.bootstrap5.js",
"node_modules/datatables.net-datetime/dist/dataTables.dateTime.min.js",
], 'public/assets/plugins/custom/datatables/datatables.bundle.js');
