Question

我试图实施分页。我主要关注django文档的分页，https://docs.djangoproject.com/en/1.8/topics/pagination/...I我不知道我做错了什么，但分页效果没有被激活：当我将页面设置为只有三个帖子时，它仍然显示九个帖子。我没有做任何特别的事，我只是按照文档。

def category_detail(request, slug):

    obj = NewsCategory.objects.get(slug=slug)
    newsInCat = obj.news_set.all() #for the list of news
    paginator = Paginator(newsInCat, 3) # Show 25 contacts per page
    page = request.GET.get('page')
    try:
        news_set = paginator.page(page)
    except PageNotAnInteger:
        # If page is not an integer, deliver first page.
        news_set = paginator.page(1)
    except EmptyPage:
        # If page is out of range (e.g. 9999), deliver last page of results.
        news_set = paginator.page(paginator.num_pages)


bestInCat = obj.news_set.get_bestInCat()
specialInCat = obj.news_set.get_special()
mustSeeInCat = obj.news_set.get_mustSeeInCat()
recommend = obj.news_set.get_recommend()
ad2 = Sponsored.objects.get_ad2()

context = {
    "obj":obj, 
    "news_set":news_set,
    "newsInCat":newsInCat,
    "bestInCat":bestInCat,
    "specialInCat":specialInCat,
    "mustSeeInCat":mustSeeInCat,
    "recommend":recommend,
    "ad2":ad2
}

以下是我的HTML ...除了分页，我还有一个问题。当帖子的标题变得太长以至于它打破了另一行时，我的页面格式变得混乱。看起来像这样

<div class="row">
<article>
  {% for news in newsInCat %}
  <div class='col-sm-4'>

    <div class="content">
    <figure class="story-image">
      <a href='{{news.get_absolute_url }}'><img src="{{news.get_image_url}}"  class="img-rounded" alt="Cinque Terre" width="360" height="267"></a>
    </figure>
      <div id="forever "style="margin-bottom:30px;">
      <a href='{{news.get_absolute_url }}' style="text-decoration:none; color:#282E5C;"><h4 style="font-size: 18px;
    font-weight: 400;">{{news.title}}</h4></a>
  </div>
        </div>
  </div>
  {% endfor %}
</article>
</div>


<div class="pagination">
    <span class="step-links">
        <!-- {% if news_set.has_previous %}
            <a href="?page={{ news_set.previous_page_number }}">previous</a>
        {% endif %}

        <span class="current">
            Page {{ news_set.number }} of {{ news_set.paginator.num_pages }}.
        </span> -->

        {% if news_set.has_next %}
            <a href="?page={{ news_set.next_page_number }}">Load More</a>
        {% endif %}
    </span>
</div>

Answer 1

这里有两个独立的问题，这些问题已在上述答案中表明：

您没有正确使用Bootstrap ：虽然您可以将多个<div class="col-sm-4">附加在一起，但如果它们的高度不同，您将在屏幕截图中看到不规则的折叠行为。 <div class="row">的目的是确保您的列显示在单独的行中。有关详细信息，请参阅Must Bootstrap container elements include row elements?。

您可以使用for-loop中的以下代码解决此问题，以便每隔三个项目添加一个新行：
```
{% if forloop.counter|divisibleby:3 %}
</div>
<div class="row">
{% endif %}
```
您没有在模板中使用正确的上下文对象：paginator对象在上下文对象中作为news_set传递，但模板使用另一个上下文对象：{{ 1}}，它不是分页的。如果您遵循@ Sayse关于使用newsInCat对象的建议，您应该处于良好状态：
```
news_set
```

作为最终建议，{% for news in news_set %}标记除了提供语义值之外似乎没有做任何事情。为什么不使用它而不是div，以便你有<article>？

作为最后一点，camelCase通常在Python中不受欢迎。尝试使用using_underscores_with_lowercase，就像你已经使用<article class="col-sm-4">一样。

添加所有这些建议，您只需要将模板修改为以下内容：

news_set

Answer 2

我可以谈谈您的HTML / CSS格式问题。 bootbox.dialog({...}) if(!condition) { $('[data-bb-handler="btn2"]').remove(); }告诉我你正在使用Bootstrap，它以12列宽度定义布局。 Bootstrap将始终尝试使所有行等于12。

现在，您循环遍历所有对象并添加每个宽度为col-sm-4的n列。 Booststrap试图确保每个占据行的三分之一，但是你要添加更多的3个div，这超过了12个总列宽。一旦列已满（从第4个新闻项开始），Bootstrap尽可能地将div移动到col-sm-4的顶部，同时仍然遵守宽度只能为12的规则。

在您拍摄的情况下，Bootstrap会偏移第4和第5个div，因为偏移使它们更接近row的顶部。

要解决此问题，您需要在其中拥有每组三个新闻项，以便您的3 row div的总宽度为12。

Answer 3

根据模板判断，您必须仍然包括完整列表以及分页集

在您的模板中，您正在迭代newsInCat而不是news_set

{% for news in newsInCat %}

应该是

{% for news in news_set %}

Django模板

3 个答案: