问题描述
我正在处理一个 Symfony 5.2.6 项目,我正在尝试在我的项目中使用 datatables.net 库,但找不到正确导入它的方法。
我使用了很多 js/jquery 库,除了数据表之外,一切都运行良好。 (我正在使用 Metronic 管理模板)
这是我的 webpack.config.js :
const Encore = require('@symfony/webpack-encore');
const CopyWebpackPlugin = require('copy-webpack-plugin');
if (!Encore.isRuntimeEnvironmentConfigured()) {
Encore.configureRuntimeEnvironment(process.env.NODE_ENV || 'dev');
}
Encore
.setOutputPath('public/build/')
.setPublicPath('/build')
.addStyleEntry('basecss','./assets/sass/style.scss')
.addStyleEntry('pluginscss','./assets/plugins/plugins.scss')
.addStyleEntry('extrascss','./assets/css/extras.css')
.addEntry('app','./assets/app.js')
.addEntry('plugins','./assets/plugins/plugins.js')
.addEntry('scripts','./assets/scripts.js')
.addEntry('test','./assets/test.js')
.addEntry('page-ms-liste','./assets/pages/matiereseche/liste.js')
.addStyleEntry('page-login-css','./assets/pages/authentication/login.css')
.enableStimulusBridge('./assets/controllers.json')
.splitEntryChunks()
.enableSingleRuntimeChunk()
.cleanupOutputBeforeBuild()
.enableBuildNotifications()
.enableSourceMaps(!Encore.isProduction())
.enableVersioning(Encore.isProduction())
.configureBabel((config) => {
config.plugins.push('@babel/plugin-proposal-class-properties');
})
.configureBabelPresetEnv((config) => {
config.useBuiltIns = 'usage';
config.corejs = 3;
})
// enables Sass/SCSS support
.enableSassLoader()
.addPlugin(new CopyWebpackPlugin({
patterns: [
{ from: './assets/images',to: 'images' }
],}))
.addLoader({
test: require.resolve('jquery'),use: [{
loader: 'expose-loader',options: {
exposes: [
{
globalName: "$",override: true,},{
globalName: "jQuery",}
]
}
}]})
.addLoader({
test: '/datatables\.net.*/',use: [{
loader: 'imports-loader',options: {
imports: {
moduleName: 'jquery',name: '$',additionalCode: "var define = false;"
}
}]})
;
const config = Encore.getWebpackConfig();
module.exports = config;
我也尝试使用 .autoProvidejQuery()
在我的scripts.js里面我有:
window.jQuery = window.$ = require('jquery');
// ...
require('datatables.net');
require('datatables.net-bs4');
然后在我的 js 文件中:
var t = $("#datatable");
t.DataTable(.....)
错误:
未捕获的类型错误:$(...).DataTable 不是函数
我发现了很多关于这个主题的主题,但是我尝试了所有方法都没有成功(使用加载器,...) 我也尝试从 CDN 和数据表导入 jquery,但我有一个 jquery 问题(jquery 未定义)
如果有人有想法...
谢谢。
解决方法
删除
window.jQuery = window.$ = require('jquery');
然后,你可以这样导入数据表:
import $ from "jquery";
require('datatables.net-bs4')( window,$ );
这样,DataTable 应该会被识别出来,你就可以使用它了。
,经过相当长的时间测试 Stackoverflow 的各种答案后,我设法使它起作用(在 Guillaume F. 和 Dylan Kas 的帮助下)。
这些是文件:
webpack.config.js
const Encore = require('@symfony/webpack-encore');
const CopyWebpackPlugin = require('copy-webpack-plugin');
if (!Encore.isRuntimeEnvironmentConfigured()) {
Encore.configureRuntimeEnvironment(process.env.NODE_ENV || 'dev');
}
Encore
.setOutputPath('public/build/')
.setPublicPath('/build')
// Main Js file
.addEntry('app','./assets/app.js')
// In my case Datatable init code is in this file. Don't forget to load this asset from your template page with the shortcut : {{ encore_entry_script_tags('my-page') }}
.addEntry('my-page','./assets/pages/my-page.js')
//.. Other imports here ..
/*.addEntry('scripts','./assets/scripts.js')*/
.splitEntryChunks()
.enableSingleRuntimeChunk()
.cleanupOutputBeforeBuild()
.enableBuildNotifications()
.enableSourceMaps(!Encore.isProduction())
.enableVersioning(Encore.isProduction())
.configureBabel((config) => {
config.plugins.push('@babel/plugin-proposal-class-properties');
})
.configureBabelPresetEnv((config) => {
config.useBuiltIns = 'usage';
config.corejs = 3;
})
.addPlugin(new CopyWebpackPlugin({
patterns: [
{ from: './assets/images',to: 'images' }
],}))
;
const config = Encore.getWebpackConfig();
// Without this,I have issues with my DT.net requires
config.module.rules.unshift({
parser: {
amd: false,}
});
module.exports = config;
我的app.js文件
window.jQuery = window.$ = require('jquery');
require('bootstrap');
window.Popper = require('popper.js').default;
// Needed form Datatables Buttons plugin
window.JSZip = require('jszip');
const pdfMake = require('pdfmake/build/pdfmake.js');
const pdfFonts = require('pdfmake/build/vfs_fonts.js');
pdfMake.vfs = pdfFonts.pdfMake.vfs;
require('datatables.net')(window,$);
require('datatables.net-bs4')(window,$);
require('datatables.net-buttons/js/dataTables.buttons.min.js')(window,$);
require('datatables.net-buttons-bs4')(window,$);
require('datatables.net-buttons/js/buttons.flash.js')(window,$);
require('datatables.net-buttons/js/buttons.html5.js')(window,$);
require('datatables.net-buttons/js/buttons.print.js')(window,$);
我的packages.json:
{
"dependencies": {
// others imports above
"bootstrap": "^4.6.0","datatables.net": "^1.10.24","datatables.net-autofill-bs4": "^2.3.5","datatables.net-bs4": "1.10.24","datatables.net-buttons-bs4": "^1.7.0","datatables.net-colreorder-bs4": "^1.5.2","datatables.net-fixedcolumns-bs4": "^3.3.2","datatables.net-fixedheader-bs4": "^3.1.7","datatables.net-keytable-bs4": "^2.5.3","datatables.net-responsive-bs4": "^2.2.6","datatables.net-rowgroup-bs4": "^1.1.2","datatables.net-rowreorder-bs4": "^1.2.7","datatables.net-scroller-bs4": "^2.0.3","datatables.net-select-bs4": "^1.3.1","jquery": "^3.6.0","jszip": "^3.5.0","pdfmake": "^0.1.36","popper.js": "^1.16.1",},"devDependencies": {
"@symfony/stimulus-bridge": "^2.0.0","@symfony/webpack-encore": "^1.0.0","copy-webpack-plugin": "^8.1.0","core-js": "^3.0.0","expose-loader": "^2.0.0","imports-loader": "^2.0.0","lodash": "^4.17.13","regenerator-runtime": "^0.13.2","sass": "^1.32.8","sass-loader": "11.0.0","script-loader": "^0.7.2","stimulus": "^2.0.0","webpack-notifier": "^1.6.0"
},"license": "UNLICENSED","private": true,"scripts": {
"dev-server": "encore dev-server","dev": "encore dev","watch": "encore dev --watch","build": "encore production --progress"
}
}
最后我的文件初始化了数据表(我每页使用一个条目 js 文件): page.js
"use strict";
var MyPage = {
init: function () {
const table = $('#datatable').DataTable({
buttons: [
{
extend: 'print',exportOptions: {
columns: [0,1,2,3]
}
},{
extend: 'excelHtml5',],columnDefs: [
{
width: '75px',targets: 4,});
$('#export_print').on('click',function(e) {
e.preventDefault();
table.button(0).trigger();
});
$('#export_excel').on('click',function(e) {
e.preventDefault();
table.button(1).trigger();
});
},};
jQuery(document).ready(function () {
MyPage.init();
});
请注意,在我的情况下,我从 2 个 html 元素切换按钮。