1

Ruby on Rails アプリで will paginate を使用しています。以前に他のアプリでこれを使用したことがあり、正常に動作していましたが、何らかの理由でこれを使用すると、ページネーションのタブが逆になっているように見えます。

ここに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

ここには2つの問題があります。

  • CSSのfloat：rightが原因で表示順序が正しくないため、要素がレンダリングされた順序で右に移動し、左から右に逆の順序になります。
  • ページ付けされたセットとper_pageでlimit（4）を使用する：ページ付けの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 に答える