ruby-on-rails - 引导表选项 : filter and search

Question

我在我的应用程序的几个页面(在 Rails 6 上)和 tables load correctly 上使用引导表.

但是，我想启用列排序和搜索功能，并且这些功能仅在刷新页面时出现:with fixed-table-toolbar displayed

我的一些application.js:

require("@rails/ujs").start();
require("turbolinks").start();
require("@rails/activestorage").start();
require("channels");
require("jquery");
require("bootstrap");
require("chartkick");
require("chart.js");

import 'mapbox-gl/dist/mapbox-gl.css';
import "@fortawesome/fontawesome-free/js/all.js";
import 'bootstrap-table/dist/bootstrap-table.min.js';
import 'bootstrap-table/dist/locale/bootstrap-table-fr-FR.js';

它在 application.html.erb 中加载 <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %> (我还尝试将 bootstrap-tables 导入放在另一个包文件中并单独导入。)

如果我尝试在 application.html.erb 底部的脚本中导入 bootstrap-table 来查看，我将收到这些错误消息，很可能是因为 Jquery 尚未加载:

Uncaught TypeError: Cannot set property 'BootstrapTable' of undefined
Uncaught TypeError: Cannot set property 'BootstrapTable' of undefined
    at VM1101 bootstrap-table.min.js:10
    at VM1101 bootstrap-table.min.js:10
    at VM1101 bootstrap-table.min.js:10
(anonymous) @ bootstrap-table.min.js:10
(anonymous) @ bootstrap-table.min.js:10
(anonymous) @ bootstrap-table.min.js:10
bootstrap-table-fr-FR.js:678 
Uncaught TypeError: Cannot read property 'fn' of undefined
    at VM1103 bootstrap-table-fr-FR.js:678
    at VM1103 bootstrap-table-fr-FR.js:4

在移动了我的导入文件和脚本之后，我已经没有想法了，所以如果有人已经遇到了同样的问题并且可以分享他/她的想法，我将永远感激不已! 谢谢

Answer 1

我必须查看更多代码才能确定，但​​我猜问题是 bootstrap-table 正在使用某种形式的 $(document).ready (function() { ... });，仅在整个页面加载/重新加载时触发。当您在启用 Turbolinks 的情况下进行导航时，这不是实际的页面加载，并且不会触发 ready 事件。

您可能需要为 turbolinks:load 事件添加辅助事件监听器，该事件是通过 Turbolinks 加载新页面时触发的事件。像这样的东西:

// put this in your application.js or another file AFTER bootstrap-table
$(document).on('turbolinks:load', function() {
    $('[data-toggle="table"]').bootstrapTable();
});

参见this answer了解更多信息。