无休止的分页困难

Question

这真是太棒了！我有以下问题：

我使用twitter bootstrap和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技能是零，所以除了我在那个教程中学到的东西外，我无法提供任何支持。

所以，最后，我的问题是：如何使用bootstrap的流畅网格和无尽的分页在四列显示这些幼儿园？

Answer 1

我只是喜欢stackoverflow！因为没有人回答我的问题，我不得不找到自己的问题。我自己的成功故事......就在这里。

首先，JS代码没问题，没有必要干涉它...但它给了我第一个线索：

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

这个东西会影响id =“kindergartens”的标签并执行erb代码。然而，所述标签位于_kindergarten.html.erb部分内部，因此在渲染后执行渲染内部执行渲染（这就是为什么我在第一次调用第二页后在span 3和1列中有span3）。

解决方案很简单（在渲染之前插入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中进行了一些调整，现在页面看起来像这样：

我赢了！