Question

我正在构建一个Rails应用程序，并使用bootstrap-table生成一个表。我正在使用标签中的data-pagination =“ true”字段为表使用分页。

分页效果很好，但是用于选择页面大小的下拉列表没有打开。它看起来像一个可单击的下拉菜单，但是当我单击它时没有任何反应。

pagination screenshot（左侧的按钮不起作用。）

这是我的宝石文件：

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'

application.js

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

application.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>

Answer 1

Bootstrap下拉列表需要popper.js才能运行。我要做的就是添加

//= require popper

之前

//= require bootstrap

，下拉列表开始起作用。

Bootstrap Table分页下拉菜单不起作用-Rails

1 个答案: