在 Stimulus 框架中使用数据表的问题

Question

我在 webpack（Stimulus 框架）中使用 DataTables。

我用 yarn 安装 jQuery 和 Datatables:

yarn add jquery --dev
yarn add jszip --dev
yarn add datatables.net --dev
yarn add datatables.net-dt --dev
yarn add datatables.net-buttons-dt --dev
yarn add datatables.net-responsive-dt --dev
yarn add datatables.net-select-dt --dev

现在我在 Stimulus 中创建一个控制器：

import {Controller} from 'stimulus';
import $ from 'jquery';
import 'jszip';
import 'datatables.net';
import 'datatables.net-dt';
import 'datatables.net-buttons-dt';
import 'datatables.net-responsive-dt';
import 'datatables.net-select-dt';

export default class extends Controller {
    connect() {
        $('#data-tables').dataTable();
    }
}

当我在控制台打开页面时显示错误：

Uncaught TypeError: Cannot read property 'ext' of undefined
    at dataTables.buttons.js:42
    at Object.<anonymous> (dataTables.buttons.js:9)
    at dataTables.buttons.js:10
    at Object../node_modules/datatables.net-buttons/js/dataTables.buttons.js (dataTables.buttons.js:30)
    at __webpack_require__ (bootstrap:18)
    at buttons.dataTables.js:8
    at Object../node_modules/datatables.net-buttons-dt/js/buttons.dataTables.js (buttons.dataTables.js:34)
    at __webpack_require__ (bootstrap:18)
    at Module../node_modules/@symfony/stimulus-bridge/lazy-controller-loader.js!./assets/controllers/datatables_controller.js (cmad_lo_controller.js:89)
    at __webpack_require__ (bootstrap:18)

我该如何解决这个问题？

Answer 1

您必须先安装软件包：

yarn add jquery --dev
yarn add jszip --dev
yarn add datatables.net --dev
yarn add datatables.net-dt --dev
yarn add datatables.net-buttons --dev
yarn add datatables.net-buttons-dt --dev
yarn add datatables.net-responsive --dev
yarn add datatables.net-responsive-dt --dev
yarn add datatables.net-select --dev
yarn add datatables.net-select-dt --dev

然后在 Stimulus 控制器中使用它：

import {Controller} from 'stimulus';
import $ from 'jquery';
import 'jszip';
import 'datatables.net-dt';
import 'datatables.net-buttons-dt';
import 'datatables.net-responsive-dt';
import 'datatables.net-select-dt';
import 'datatables.net-dt/css/jquery.dataTables.css';
import 'datatables.net-buttons-dt/css/buttons.dataTables.css';
import 'datatables.net-responsive-dt/css/responsive.dataTables.css';
import 'datatables.net-select-dt/css/select.dataTables.css';

export default class extends Controller {
    connect() {
        $('#data-tables').DataTable();
    }
}

在 Stimulus 框架中使用数据表的问题

Problem for using DataTables in Stimulus framework

javascript

jquery

ecmascript-6

datatables

stimulusjs