引导表分页下拉菜单不起作用 - Rails答案

【问题标题】：Bootstrap Table pagination dropdown not working - Rails引导表分页下拉菜单不起作用 - Rails
【发布时间】：2019-05-06 05:10:06
【问题描述】：

我正在构建一个 Rails 应用程序并使用 bootstrap-table 生成一个表。我正在使用标签中的 data-pagination="true" 字段对表格进行分页。

分页工作正常，但选择页面大小的下拉菜单未打开。它看起来像一个可点击的下拉菜单，但当我点击它时没有任何反应。

pagination screenshot（左边那个按钮不起作用。）

这是我的 Gemfile：

source 'https://rubygems.org'
git_source(:github) { |repo| "https://github.com/#{repo}.git" }

ruby '2.5.1'

# Bundle edge Rails instead: gem 'rails', github: 'rails/rails'
gem 'rails'
# Use Puma as the app server
gem 'puma'
# Use SCSS for stylesheets
gem 'sass-rails'
# Use Uglifier as compressor for JavaScript assets
gem 'uglifier'
# Use CoffeeScript for .coffee assets and views
gem 'coffee-rails'
# Turbolinks makes navigating your web application faster. Read more:                 
https://github.com/turbolinks/turbolinks
gem 'turbolinks'
# Build JSON APIs with ease. Read more: 
https://github.com/rails/jbuilder
gem 'jbuilder'
gem 'bootstrap'
gem 'bootstrap-table-rails'
gem 'jquery-rails'
gem 'rails-ujs'
gem 'jquery-ui-rails'
gem 'jquery-turbolinks'
gem 'font-awesome-rails'

应用程序.js

//= require jquery
//= require jquery-ui
//= require bootstrap
//= require bootstrap-table
//= require_tree .

应用程序.css.scss

@import 'bootstrap';
@import 'bootstrap-table';
@import "font-awesome";

home.html.erb

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>All Players</title>
  </head>

  <body>
    <div class="table-responsive">
      <table class="table-condensed table-striped"
             data-search="true"
             data-toggle="table"
             data-url="all_players/get_data"
             data-sort-name="transfers_in_event"
             data-sort-order="desc"
             data-pagination="true"
             data-show-refresh="true">
          <thead class="thead-dark">
              <tr>
                  <th data-sortable="true" data-field="name">Name</th>
                  <th data-sortable="true" data-field="now_cost" data-order="desc" data-align="center">Cost</th>
                  <th data-sortable="true" data-field="selected_by_percent" data-order="desc" data-align="center">Selected By</th>
                  <th data-sortable="true" data-field="transfers_out_event" data-order="desc" data-align="center">Transfers Out</th>
                  <th data-sortable="true" data-field="transfers_in_event" data-order="desc" data-align="center">Transfers In</th>
                  <th data-sortable="true" data-field="total_points" data-order="desc" data-align="center">Points</th>
                  <th data-sortable="true" data-field="points_per_game" data-order="desc" data-align="center">PPG</th>
                  <th data-sortable="true" data-field="goals_scored" data-order="desc" data-align="center">Goals</th>
                  <th data-sortable="true" data-field="assists" data-order="desc" data-align="center">Assists</th>
                  <th data-sortable="true" data-field="clean_sheets" data-order="desc" data-align="center">Clean Sheets</th>
              </tr>
          </thead>
      </table>
    </div>

  </body>

</html>

【问题讨论】：

标签： html ruby-on-rails bootstrap-table

【解决方案1】：

引导下拉菜单需要 popper.js 才能工作。我所要做的就是添加

//= require popper

之前

//= require bootstrap

然后下拉菜单开始工作。

【讨论】：