javascript - 如何修复功能失调的分页？

Question

这个 alphabetical_paginate gem 有问题＆我不知道如何解决它。我假设这不是它应该看起来的样子(我添加了背景颜色):

我假设字母应该水平显示:

All A P

而且我知道出了点问题，因为 A 之后的任何字母都无法点击。一个用户只能点击“All”或“A”，我在这个分页中只有两个用户，我们称他们为“Anthony”和“Paul”。

控制者

class UsersController < ApplicationController

  def index
    @users, @alphaParams = User.all.alpha_paginate(params[:letter]){|user| user.name}
  end

  ...
end

用户/索引

<%= alphabetical_paginate @alphaParams %>

<div id="pagination_table">
  <%= render @users %>
</div>

assets.rb

Rails.application.config.assets.version = '1.0'

Rails.application.config.assets.precompile += %w( stat.js )

Rails.application.config.assets.precompile += %w( habit.js )

Rails.application.config.assets.precompile += %w( alphabetical_paginate.js )

你认为原因是什么？请不要犹豫，要求进一步的代码或说明。

Answer 1

添加了 CSS 类

  def index
    @users, @alphaParams = User.alpha_paginate(params[:letter], {:pagination_class => "pagination-centered"}){|user| user.name}
  end

CSS

.pagination-centered {
  li {
  display: inline;
  padding: 6px 12px;
  background-color: white;
  border: 1px solid #ddd;
  margin-left: -1px;
  a {
    color: #446CB3;
  }
  }
  li.active {
    background-color: #446CB3;    
  }
}