Django2.0:【Django2.0教程】14.優化分頁展示 視訊學習筆記
當前頁高亮
修改blog/templates/blog/blog_list.html:
...
<ul class="pagination">
<li>
{# 上一頁 #}
{% if page_of_blogs.has_previous %}
<a href="?page={{ page_of_blogs.previous_page_number }}" aria-label="Previous">
<span aria-hidden="true">«</span >
</a>
{% else %}
<span aria-hidden="true">«</span>
{% endif %}
</li>
{# 頁碼 #}
{% for page_num in page_of_blogs.paginator.page_range %}
{% if page_num == page_of_blogs.number %}
<li class="active"><a href="?page={{ page_num }}">{{ page_num }}</a></li>
{% else %}
<li><a href="?page={{ page_num }}">{{ page_num }}</a></li>
{% endif %}
{% endfor %}
<li>
{# 下一頁 #}
{% if page_of_blogs.has_next %}
<a href="?page={{ page_of_blogs.next_page_number }}" aria-label="Next">
<span aria-hidden="true">»</span>
</a>
{% else %}
<span aria-hidden="true">»</span>
{% endif %}
</li>
</ul>
...
多頁碼縮減顯示
頁碼最多顯示連續五個
修改blog/views.py:def blog_list(request):
blogs_all_list = Blog.objects.all()
paginator = Paginator(blogs_all_list, 2)
page_num = request.GET.get('page', 1) # 獲取url的頁碼引數。GET返回字典,page_num預設為1
page_of_blogs = paginator.get_page(page_num)
current_page_num = page_of_blogs.number # 獲取當前頁碼
# 獲取前後各頁
page_range = list(range(max(current_page_num - 2, 1), current_page_num)) + list(range(current_page_num, min(current_page_num + 2, paginator.num_pages) + 1))
context = {}
context['page_of_blogs'] = page_of_blogs
# context['blogs_count'] = Blog.objects.all().count()
context['blog_types'] = BlogType.objects.all()
context['page_range'] = page_range
return render_to_response('blog/blog_list.html', context)
...
修改blog/templates/blog/blog_list.html對應的位置:
...
{# 頁碼 #}
{% for page_num in page_range %}
...
顯示首尾頁碼
修改blog/views.py:...
# 獲取前後各頁
page_range = list(range(max(current_page_num - 2, 1), current_page_num)) + list(range(current_page_num, min(current_page_num + 2, paginator.num_pages) + 1))
if page_range[0] != 1:
page_range.insert(0, 1)
if page_range[-1] != paginator.num_pages:
page_range.append(paginator.num_pages)
...
顯示省略號
修改blog/views.py:...
# 獲取前後各頁
page_range = list(range(max(current_page_num - 2, 1), current_page_num)) + list(range(current_page_num, min(current_page_num + 2, paginator.num_pages) + 1))
# 加上省略號
if page_range[0] - 1 >= 2:
page_range.insert(0, '...')
if page_range[-1] != paginator.num_pages:
page_range.append(paginator.num_pages)
# 加上首尾頁碼
if page_range[0] != 1:
page_range.insert(0, 1)
if page_range[-1] != paginator.num_pages:
page_range.append(paginator.num_pages)
...
修改blog/templates/blog/blog_list.html:
{% block content %}
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-8 col-md-9 col-lg-10">
<div class="panel panel-default">
...
</div>
<div class="paginator">
<ul class="pagination">
<li>
{# 上一頁 #}
...
</li>
{# 頁碼 #}
{% for page_num in page_range %}
{% if page_num == page_of_blogs.number %}
<li class="active"><span>{{ page_num }}</span></li>
{% else %}
{% if page_num == '...' %}
<li><span>{{ page_num }}</span></li>
{% else %}
<li><a href="?page={{ page_num }}">{{ page_num }}</a></li>
{% endif %}
{% endif %}
{% endfor %}
<li>
{# 下一頁 #}
...
</li>
</ul>
<p>共有{{ page_of_blogs.paginator.count }}篇博文,當前第{{page_of_blogs.number}}頁,共{{page_of_blogs.paginator.num_pages}}頁 </p>
</div>
</div>
...
</div>
</div>
{% endblock %}
修改blog/static/blog/blog.css:
...
div.paginator {
text-align: center;
}
...
優化部落格分類頁面
改blog/views.py:# 在blog_list()方法基礎上修改
def blogs_with_type(request, blog_type_pk):
blog_type = get_object_or_404(BlogType, pk=blog_type_pk)
blogs_all_list = Blog.objects.filter(blog_type=blog_type)
paginator = Paginator(blogs_all_list, 2)
page_num = request.GET.get('page', 1) # 獲取url的頁碼引數。GET返回字典,page_num預設為1
page_of_blogs = paginator.get_page(page_num)
current_page_num = page_of_blogs.number # 獲取當前頁碼
# 獲取前後各頁
page_range = list(range(max(current_page_num - 2, 1), current_page_num)) + list(range(current_page_num, min(current_page_num + 2, paginator.num_pages) + 1))
# 加上省略號
if page_range[0] - 1 >= 2:
page_range.insert(0, '...')
if page_range[-1] != paginator.num_pages:
page_range.append(paginator.num_pages)
# 加上首尾頁碼
if page_range[0] != 1:
page_range.insert(0, 1)
if page_range[-1] != paginator.num_pages:
page_range.append(paginator.num_pages)
context = {}
context['blog_type'] = blog_type
context['blogs'] = page_of_blogs.object_list
context['page_of_blogs'] = page_of_blogs
context['blog_types'] = BlogType.objects.all()
context['page_range'] = page_range
return render_to_response('blog/blogs_with_type.html', context)
settings自定義設定
超引數可以放在mysite/settings.py中設定。比如將每頁顯示多少博文的數量作為超引數放於mysite/settings.py中:...
BLOGS_NUM_PER_PAGE = 7
...
修改blog/views.py;
...
from django.conf import settings
...
paginator = Paginator(blogs_all_list, settings.BLOGS_NUM_PER_PAGE)
...
相關推薦
Django2.0:【Django2.0教程】14.優化分頁展示 視訊學習筆記
當前頁高亮 修改blog/templates/blog/blog_list.html: ... <ul class="pagination"> <li> {# 上一頁 #} {% if pa
Django2.0:【Django2.0教程】04.使用模版顯示內容 視訊學習筆記
檢視文章頁面:唯一標示id article/migrations/0001_initial.py的內容如下: # Generated by Django 2.0.5 on 2018-05-11 06:54 from django.db import m
Django2.0:【Django2.0教程】02.入門儀式:Hello World 視訊學習筆記
進入到需要放置專案的路徑,使用如下命令建立專案: $ django-admin startproject mysite 這裡,mysite為專案名稱,也可以是其他的名字。進入到mysite目錄之後,可以看到目錄結構如下: . ├── mana
Django2.0:【Django2.0教程】08.常用的模版標籤和過濾器 視訊學習筆記
繼續搭建blog blog/views.py from django.shortcuts import render_to_response, get_object_or_404 from .models import Blog, BlogType d
Django2.0:【Django2.0教程】13.分頁和shell命令列模式 視訊學習筆記
快速新增博文:Shell命令列模式 $ python manage.py shell 匯入Blog模型: >>> from blog.models import Blog 驗證是否成功引用: >>&
Django2.0:【Django2.0教程】11.CSS框架協助前端佈局 視訊學習筆記
將下載的bootstrap解壓並重命名為bootstrap-3.3.7,移動至static/下,這裡只用到css/bootstrap.min.css和css/bootstrap.min.css.map、js/bootstrap.min.js和全部font
【防坑指南】使用Mybatis分頁外掛PageHelper為什麼PageInfo物件出現null的原因
在mybatis中,先匯入pagehelper.jar所需的jar包,然後在sqlMapConfig,xml中配置外掛 <plugins> <!-- com.github.pagehelper為PageHelper類所在包名 --> <plug
【慕課網】強力Django和殺手級xadmin學習筆記
慕課網 強力Django和殺手級xadmin學習筆記 2018年6月 3-2 3-3 指定主鍵 primary_key = True 3-5 在url中指
《C#高階程式設計》【第八章】委託、lambda表示式和事件 -- 學習筆記
之前由於考試的關係,耽誤了不少時間。然而考試也考的不怎麼樣,說多了都是淚。下面我們直接進入今天的正題 --- 委託。 委託是一個神奇的東西。委託的出現,使得方法可以作為引數進行傳遞。其中我們接觸最多的應該就是通用庫類。通用庫類,正是由於這種機制
【自制作業系統05】開啟記憶體分頁機制
通過前四章的努力,我們成功將控制權轉交給了 loader.asm 這個程式,並且從真實模式跨越到了保護模式。第四章講保護模式的時候我說過,這是我們作業系統的第一個精彩之處。但其實這只是針對之前我們進行的只是無意義的輸出,以及硬碟的載入等工作。但到了這一章,之前一步步的努力進入到了保護模式,也只能說是做了很多苦
給初學者的RxJava2.0教程(二):【執行緒控制】
前言 上一節教程講解了最基本的RxJava2的使用, 在本節中, 我們將學習RxJava強大的執行緒控制. 正題 還是以之前的例子, 兩根水管: 正常情況下, 上游和下游是工作在同一個執行緒中的, 也就是說上游在哪個執行緒發事件,
【React 實戰教程】從0到1 構建 github star管理工具
前言 在日常使用github中,除了利用git進行專案版本控制之外,最多的用處就是遊覽各式的專案,在看到一些有趣或者有用的專案之後,我們通常就會順手star,目的是日後再看。但是當我們star了許多專案之後,回過頭想找一個的專案就會發現,很難在短時間內找到它,官方也並沒有提供很好的管理我們的star專案的功
【ROM修改教程】新增高階電源重啟選單(安卓4.0.4官方ROM)
準備工作: 電腦上安裝好JDK、下載smali和baksmali、下載apktools、要修改的ROM、adb工具(可選) 注:由於本教程面向的物件為有一定ROM修改基礎的兄弟,所以對於如何使用電腦,如何使用CMD以及上述工具的具體用法等等都不在本貼的討論範圍內,本文將僅講述如何新增高階重啟選單 1、從要
【Unity3D基礎教程】給初學者看的Unity教程(零):如何學習Unity3D
cos 詳解 component lock index unity3d遊戲 design 技術棧 log 【Unity3D基礎教程】給初學者看的Unity教程(零):如何學習Unity3D http://www.cnblogs.com/neverdie/p/How_To_
【Qt OpenGL教程】25:變形和從檔案中載入3D物體
第25課:變形和從檔案中載入3D物體 (參照NeHe) 這次教程中,我們將學會如何從檔案中載入3D模型,並且平滑的從一個模型變形為另一個模型。在這一課裡,我們將介紹如何實現模型的變形過程,這將會是效果很棒的一課! 程式執行時效果如下: 下面進入教程: 我們這次將在第
【Unity3D基礎教程】給初學者看的Unity教程(六):理解Unity的新GUI系統(UGUI)
理解UGUI的基礎架構 UGUI是Unity在4.6中引入的新的GUI系統,與傳統的中介軟體NGUI相比,這套新GUI系統有幾個核心亮點: 放棄了Atlas的概念,使用Packing Tag的方式來進行圖集的規劃 放棄了depth來確定UI顯示層級的概念,使用Hierarchy的SiblingIndex
【Unity3D基礎教程】給初學者看的Unity教程(二):所有指令碼元件的基類 -- MonoBehaviour的前世今生
引子 上一次我們講了GameObject,Compoent,Time,Input,Physics,其中Time,Input,Physics都是Unity中的全域性變數。GameObject是遊戲中的基本物件。GameObject是由Component組合而成的,GameObject本身必須有
【Unity3D基礎教程】給初學者看的Unity教程(五):詳解Unity3D中的協程(Coroutine)
為什麼需要協程 在遊戲中有許多過程(Process)需要花費多個邏輯幀去計算。 你會遇到“密集”的流程,比如說尋路,尋路計算量非常大,所以我們通常會把它分割到不同的邏輯幀去進行計算,以免影響遊戲的幀率。 你會遇到“稀疏”的流程,比如說遊戲中的觸發器,這種觸發器大多數時候什麼也不做,但
【Unity3D基礎教程】給初學者看的Unity教程(三):通過製作Flappy Bird瞭解Native 2D中的Sprite,Animation
引子 上一次我們講了MonoBehaviour的前世今生,瞭解了遊戲中的每一個GameObjec都是由指令碼控制的,這一次我們開始將Unity中Native 2D中的Sprite,並且使用Animation來讓Sprite動起來。 在接下來的幾篇部落格裡,我會通過做一個Flappy Bird來講解
【Unity3D基礎教程】給初學者看的Unity教程(四):通過製作Flappy Bird瞭解Native 2D中的RigidBody2D和Collider2D
引子 認識RigidBody 當RigidBody2D的質量屬性被設定為0時,剛體的質量變為無限大,此時剛體相當於靜態剛體,永遠一動不動。但是在Unity中你是無法把一個RigidBody2D的質量設定為0的,所以,當你想建立一個靜態剛體時,只需要建立碰撞器,而不需要建立RigidBo