如何在Symfony 4和Webpack Encore中使用数据表?

我正在尝试使用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表...

有人可以指出我正确的方向吗?谢谢。

redroom88 回答:如何在Symfony 4和Webpack Encore中使用数据表?

const $ = require('jquery');更改为window.$ = window.jQuery = require('jquery');

我遇到了同样的问题,因为未定义window.jQuery-上面的更改应该可以正常工作。

app.js

require('../css/app.scss');

window.$ = window.jQuery = require('jquery'); //changed
require('bootstrap');
require('datatables.net-bs4');
//removed $.fn.dataTable - not required

$(document).ready(function() {
     console.log('Applying DT');
     $('#tabletest').DataTable();
});
,

我以相同的方式使用datatables-bs4,唯一的区别是app.js,即我需要它和jQuery的方式,并且工作正常:

// require jQuery normally
import $ from 'jquery';
// create global $ and jQuery variables
global.$ = global.jQuery = $;

import 'bootstrap' ;

require('datatables.net-bs4')( window,$ );

$(document).ready(function () {
    $("#myTable").DataTable(
        // options
    );
});
本文链接:https://www.f2er.com/3167642.html

大家都在问