引导表选项：过滤和搜索

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。