我正在尝试使用Webpack Encore在Symfony 4项目中使用数据表,我已经读过the datatables documentation about integration with yarn,有关SO的许多教程和问题,但是我仍然不知道如何使它起作用。 ..我尝试了所有可能的配置,但出现错误,或者什么也没有发生。我结束了:
软件包版本(package.json):
{
"devDependencies": {
"@fortawesome/fontawesome-free": "^5.6.3","@symfony/webpack-encore": "^0.22.0","bootstrap": "^4.2.1","jquery": "^3.3.1","node-sass": "^4.11.0","popper.js": "^1.14.6","sass-loader": "^7.0.1","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"
},"dependencies": {
"datatables.net-bs4": "^1.10.20","flag-icon-css": "^3.2.1"
}
}
webpack.config.js:
我禁用了AMD加载程序(请参阅最后几行):
var Encore = require('@symfony/webpack-encore');
Encore
.setOutputPath('public/build/')
.setPublicPath('/build')
.addEntry('app','./assets/js/app.js')
// will require an extra script tag for runtime.js
// but,you probably want this,unless you're building a single-page app
.enableSingleRuntimeChunk()
// FEATURE CONFIG
.cleanupOutputBeforeBuild()
.enableBuildNotifications()
.enableSourceMaps(!Encore.isProduction())
// enables hashed filenames (e.g. app.abc123.css)
.enableVersioning(Encore.isProduction())
// enables Sass/SCSS support
.enableSassLoader()
// uncomment if you're having problems with a jQuery plugin
.autoProvidejQuery()
;
var config = Encore.getWebpackConfig();
//disable amd loader
config.module.rules.unshift({
parser: {
amd: false,}
});
module.exports = config;
app.js
require('../css/app.scss');
// JQuery and Bootstrap
const $ = require('jquery');
require('bootstrap');
// Datatables and datatables-BS4
require('datatables.net-bs4')();
$.fn.dataTable = $.fn.DataTable = global.DataTable = require('datatables.net-bs4');
// Should probably be in the template...
$(document).ready(function() {
console.log('Applying DT');
$('#tabletest').DataTable();
});
测试模板文件:
{% block stylesheets %}
{{ encore_entry_link_tags('app') }}
{% endblock %}
{% block body %}
<table id="tabletest">
<thead>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</tbody>
</table>
{% endblock %}
{% block javascripts %}
{{ encore_entry_script_tags('app') }}
{% endblock %}
禁用了webpack中的AMD加载器,并在app.js中添加了行$.fn.dataTable = $.fn.DataTable = global.DataTable = require('datatables.net-bs4');
,我没有遇到任何JavaScript错误,但是数据表未应用于#tabletest
表...
有人可以指出我正确的方向吗?谢谢。