1

我正在使用将在我的 ruby​​ on rails 应用程序上分页。我之前在其他应用程序上使用过它，它工作正常但是当我出于某种原因在这个应用程序上使用它时，它看起来分页的选项卡被反转了。

这是html

<div class="container">
 <br />
 <br />
 <h2 class="black">
Recent News
<div class="line_section"><div>
 </h2>
 <div class="row"> 
<div class="span12">

<ul class="recent-news"> 

<% @news_all.each do |news| %>

 <li style="font-size: 16px; line-height: 19px; letter-spacing: 1px; font-size: 14px;  color: #555; text-align: left;">
  <%= image_tag news.photo.url, class: 'pull-left', style: 'margin-right:40px; margin-top: 2px; width: 300px;' %> 
  <div style=" width: 600px; float: right;">
   <%= link_to news.title, news %> 
  <br />

   <%= link_to news.date, news, style: 'font-size: 10px; color: black; position: relative; top: 15px;' %> 

   <br /><br />
  <%= truncate news.content, length: 500 %> 
   <br />  
    <%= link_to 'Read More...', news, style: 'font-size: 12px !important;' %>
  </div>
      </li>
      <% end %> 

     <%= will_paginate @news_all %>
        </div><!-- end span12 -->


    </div><!-- end row -->
          </div><!-- end container -->

这是控制器

     def batnews
      @article = Article.first
      @news_all = News.all
      @news_all = News.paginate(page: params[:page]).limit(4)
      @comments = Comment.all
    end

这是该站点的链接，因此您可以查看实际情况。

http://www.batman-fansite.com/batnews

如果滚动到底部，您将看到分页。

4

3 回答 3

1

修复你的CSS：

.recent-news li {
   float: right;
}

添加类似的东西

.recent-news .pagination li {
   float: left;
}
于 2012-12-17T18:52:13.390 回答
1

这里有两个问题：

  • 由于 CSS float:right 导致显示顺序不正确，导致元素按渲染顺序向右移动，从而导致从左到右的倒序排列。
  • 在分页集上使用 limit(4) 与 per_page: 4 分页选项。

检查你的 CSS，你会发现：

.recent-news li {
  float: right;
}

...您的控制器代码应该是：

 @news_all = News.paginate(page: params[:page], per_page: 4)
于 2012-12-17T18:55:28.993 回答
0

尝试这样的事情：

def index

@posts = Post.paginate :page => params[:page], **:order => "created_at ASC"**
end
于 2012-12-17T18:55:55.170 回答