javascript - 在 Stimulus 框架中使用 DataTables 的问题
问题描述
我在 webpack (刺激框架)中使用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)
我该如何解决这个问题?
解决方案
您必须首先安装此软件包:
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
然后在刺激控制器中使用它:
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();
}
}
推荐阅读
- python - 如何对文件中的交替行进行操作
- javascript - 如何访问 SectionList 的数据?
- html - 如何将此文本放置在其中以使其显示在一行中
- python - Python - 带有数组的字典到 csv 文件
- python - Selenium 和 Python:如何查找按钮列表并在循环中单击它们
- python - 如何知道用户属于哪个组
- python - 排序和展平数据列表/字典
- python - 如何从 python 中的 API 调用中过滤出错误响应?
- regex - 在 HCL OneTest 数据中导入架构时,是否可以更改项目类型的属性?
- java - SendGrid 电子邮件 SDK - Java