Bootstrap table 选项：筛选和搜索

Question

我在我的应用程序的多个页面（在 Rails 6 上）和 tables load correctly.

上使用 bootstrap tables

但是，我想启用列排序和搜索功能，这些仅在我刷新页面时出现：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 import放到另外一个pack文件里单独导入。）

如果我尝试在 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

我运行没有想法，在将我的导入文件和脚本四处移动之后，如果有人已经遇到同样的问题并且可以分享 his/her 想法，我将永远感激不已！谢谢

Answer 1

我必须查看更多您的代码才能确定，但我猜问题是 bootstrap-table 正在使用某种形式的 $(document).ready(function() { ... });，它只会在完整的情况下触发第 load/reload 页。当您在启用 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。

Bootstrap table 选项：筛选和搜索

Bootstrap table options: filter and search

ruby-on-rails

bootstrap-4

ruby-on-rails-6