表分类器不是rails 6的一个功能错误

Question

我试图将表分类器添加到我的表中，但最终在浏览器控制台上出现以下错误。Uncaught TypeError: n(...).tablesorter is not a function这是我的application.js:

// This file is automatically compiled by Webpack, along with any other files
// present in this directory. You're encouraged to place your actual application logic in
// a relevant structure within app/javascript and only use these pack files to reference
// that code so it'll be compiled.
import Rails from "@rails/ujs"
import * as ActiveStorage from "@rails/activestorage"
require('jquery')
import "channels"
import "cocoon";
import "chartkick/chart.js"
import tablesorter from 'tablesorter/dist/js/jquery.tablesorter'
Rails.start()
ActiveStorage.start()
import 'bootstrap/dist/js/bootstrap'
import 'bootstrap/dist/css/bootstrap'
import '../stylesheets/application'
import "@fortawesome/fontawesome-free/js/all"
require("stylesheets/application")
$(function () {
$('.tablesorter').tablesorter({
showProcessing: true,
// initialize zebra and filter widgets
widgets: ["zebra", "filter"],
headers: {
0: { sorter: false, filter: false },
13: { sorter: true, filter: true }
}
});
})

我已经在Gemfilejquery-tablesorter中添加了gem。我也做了yarn add jquery和yarn add tablesorter，但我仍然被卡住了。

注意：jquery-tablesorter是我的Gemfile中唯一一个与jquery相关的gem。

Answer 1

我不确定$在哪里加载。Tablesorter无法访问它来定义tablesorter功能。你需要明确地导入它。

import jQuery from "jquery";
import "tablesorter/dist/js/jquery.tablesorter";
window.$ = window.jQuery = jQuery;

或

window.$ = window.jQuery = require("jquery");
require("tablesorter/dist/js/jquery.tablesorter");