我正在尝试实现分页。我主要遵循django文档进行分页,https://docs.djangoproject.com/en/1.8/topics/pagination/...I不确定我做错了什么,但是分页效果没有被激活:当我将page设置为只有3个post时,它仍然显示9个post。我没有做什么特别的事,我只是按照文件做的。在
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…除了分页,我还有一个问题。当文章的标题变得太长,以至于它打断了另一行,我的页面的格式就会混乱。看起来像这样
^{pr2}$
我可以谈谈你的HTML/CSS格式问题。
col-sm-4
告诉我您使用的是Bootstrap,它按照12列宽度定义布局。引导将始终尝试使所有行的with等于12。在现在,您在所有对象上循环并添加n列,每个列的宽度为}的顶部,同时仍然遵循宽度只能是12的规则。在
col-sm-4
。boosttrap试图确保每一个都占到行的三分之一,但是添加的div超过了3个div,这超过了12个列宽。一旦专栏文章满了(从第4条新闻开始),Bootstrap会尽可能地将div移到{在图中的例子中,引导程序偏移了div的第4个和第5个,因为偏移允许它们更接近
row
的顶部。在要解决这个问题,您需要将每组三个新闻条目放在自己的行中,这样您的3
col-sm-4
div的总宽度为12。在根据模板判断,您必须仍然包括完整列表以及分页集
在模板中,您正在迭代
newsInCat
,而不是news_set
应该是
^{pr2}$在这里,有两个独立的问题在上面的答案中已经指出:
您没有正确使用引导程序:尽管您可以将多个
<div class="col-sm-4">
附加在一起,但是如果它们的高度不同,您将在屏幕截图中看到不规则的折叠行为。<div class="row">
的目的是确保列出现在单独的行中。有关详细信息,请参见Must Bootstrap container elements include row elements?。在您可以在for循环中使用如下代码来解决此问题,以便每隔三个项目添加一个新行:
您没有在模板中使用正确的上下文对象:paginator对象在上下文对象中作为
^{2美元news_set
传递,但是模板使用了另一个上下文对象:newsInCat
,它没有分页。如果您按照@Sayse的建议使用news_set
对象,那么您应该状态良好:作为一个最后的建议,
<article>
标记除了给出语义值之外似乎没有做任何事情。为什么不直接使用它而不是div,这样就有了<article class="col-sm-4">
?在最后一点,在Python中camelCase通常是不受欢迎的。试着用小写字母加下划线,就像你已经用了
news_set
。在添加所有这些建议后,您只需将模板修改为以下内容:
相关问题 更多 >
编程相关推荐