麻煩與無盡的分頁

這是一個很奇怪！我有以下問題：麻煩與無盡的分頁

我使用twitter引導和will_paginate（增強到無盡分頁）與我當前的項目，目標是使用流體佈局顯示4列格式的所有項目。但是，在加載第二個頁面之後，會顯示無盡的頁面中斷，並顯示will_paginate。

這是如何訪問首次

它遵循正確作爲twitter bootsrap page描述，一般看起來除了錯位良好的流體嵌套頁面加載時。

第二頁面加載後，頁面看起來是這樣的：

和佈局是真的搞砸。而不是第1列中的每個元素都在它自己的「span3」類中，整個列是包含其他「span3」元素的「span3」。

好吧，這裏是代碼：

_kindergarten.html.erb

<div class="span3" id="kindergartens"> 
    <%= link_to kindergarten.name, kindergarten %> 
</div>

index.html.erb

<div class="row-fluid"> 
    <div class="span12"> 
     <div class="row-fluid"> 
      <%= render @kindergartens %> 
     </div> 

     <div class="pull-right"> 
      <%= will_paginate %> 
     </div> 

    </div> 
</div>

而下面的代碼被用於無盡的分頁（source）：

kindergartens.js.coffee

jQuery -> 
    if $('.pagination').length 
    $(window).scroll -> 
     url = $('.pagination .next_page').attr('href') 
     if url && $(window).scrollTop() > $(document).height() - $(window).height() - 50 
     $('.pagination').html('<img src="assets/spinner.gif" />') 
     $.getScript(url) 
    $(window).scroll()

index.js.erb的

$('#kindergartens').append('<%= escape_javascript(render(@kindergartens)) %>'); 
<% if @kindergartens.next_page %> 
    $('.pagination').replaceWith('<%= escape_javascript(will_paginate(@kindergartens)) %>'); 
<% else %> 
    $('.pagination').remove(); 
<% end %> 
<% sleep 1 %>

不幸的是我的js技能是零，所以我不能提供，除了我在教程中所學到的任何支持。

因此，最後，我的問題是：我如何使用引導程序的流體網格和無盡的分頁顯示這些幼兒園的四列？

來源

2012-09-10 Adrian M

我只是愛的stackoverflow！因爲沒有人回答我的問題，我不得不尋找自己的問題。我自己的成功故事......就在這裏。

首先，JS代碼就可以了，而且也沒有必要與干涉它...但它給我的第一線索：

$('#kindergartens').append('<%= escape_javascript(render(@kindergartens)) %>');

這東西會影響用id =「幼兒園標籤「並執行erb代碼。然而，所述標籤位於_kindergarten.html.erb部分內部，因此在呈現內部呈現後呈現渲染結果後執行（這就是爲什麼我在第一次調用第二頁後在跨3和1列內跨越3的原因）。

解決方案很簡單（插入ID之前渲染）：

<div class="container-fluid"> 
    <div class="row-fluid"> 
     <div class="span12"> 
      <div class="row-fluid" id="kindergartens"> 
       <%= render @kindergartens %> 
      </div> 
     </div> 
    </div> 

    <div class="pull-right"> 
     <%= will_paginate %> 
    </div> 

</div>

所出現現在是我有3個全列，僅在第4個元素的問題。這是由於span3寬度關閉的緣故。在/ public/assets/aplication中進行一些調整。CSS和現在的頁面看起來是這樣的：

enter image description here

我贏了！

來源

2012-09-10 20:34:05

麻煩與無盡的分頁

回答

相關問題