Estoy tratando de agregar Tablesorter a mis tablas, pero termino con el siguiente error en la consola del navegador. Uncaught TypeError: n(...).tablesorter is not a function Aquí está mi 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 } } }); }) He agregado la gema en Gemfile jquery-tablesorter . También he hecho yarn add jquery y yarn add tablesorter pero todavía estoy atascado.
Nota: jquery-tablesorter es la única gema relacionada con jquery que tengo en mi Gemfile.
No estoy seguro de dónde se carga $ aquí. Tablesorter no tiene acceso a él para definir la función de tablesorter . Necesitas importarlo explícitamente.
import jQuery from "jquery"; import "tablesorter/dist/js/jquery.tablesorter"; window.$ = window.jQuery = jQuery;o
window.$ = window.jQuery = require("jquery"); require("tablesorter/dist/js/jquery.tablesorter");