引导表分页下拉菜单不起作用 - Rails
Posted
技术标签:
【中文标题】引导表分页下拉菜单不起作用 - Rails【英文标题】：Bootstrap Table pagination dropdown not working - 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>
【问题讨论】：
【参考方案1】：引导下拉菜单需要 popper.js 才能工作。我所要做的就是添加
//= require popper
之前
//= require bootstrap
然后下拉菜单开始工作。
【讨论】：
以上是关于引导表分页下拉菜单不起作用 - Rails的主要内容，如果未能解决你的问题，请参考以下文章