#プロジェクトpage_projectを作成します。
構成設定
スタート
#インポートモジュール関連するページャ
django.core.paginatorインポートページネータから、EmptyPage、PageNotAnInteger
ビューのURL
app01インポートビューから urlpatterns = [ URL( '^管理/ R'、admin.site.urls)、 URL( '^インデックス/ R'、views.index) ]
ビュービュー、テストデータは、データ100を準備します
デフ指数(要求): #插入一条数据 #book_1 =ブック(タイトル= 'のpython'、価格= "60") #1 book_1.save() ブックリスト= [] iの範囲内(100): Booklist.append(ブック(タイトル= "ブック" + STR(I)、価格= 30 + i *は2)) Book.objects.bulk_create(ブックリスト) "" " :PARAM要求: :リターン: """ )("インデックス"のHttpResponseを返します
データsqlliteを見ます
100データ挿入を参照してください。
内のすべてのデータを示す機能1、
デフ指数(要求): #分页器 book_list = Book.objects.all() プリント(book_list、タイプ(book_list)) のリターン(要求、 "index.htmlを"、地元の人々を())レンダリング
htmlページ
フロントページには、以下の通りです
機能2、ページャ一般的に使用される機能
景色
book_list = Book.objects.all() paginator = Paginator(book_list, 3) # 每页显示三条数据 print(paginator, type(paginator)) print("count:", paginator.count) # 数据总数 print("num_pages", paginator.num_pages) # 总页数 print("page_range", paginator.page_range) # 页码的列表
访问页面刷新获取数据
# 显示首页数据
views
first_page = (request.GET.get()) first_page_data = paginator.page(first_page)
index .html
显示首页 {% %} {{ .}} ---{{ .}} {% %}
前端访问显示
功能三、根据请求页面数显示不同页面的数据,不存在的页面数据就显示首页
try: current_page_number = int(request.GET.get("page", 1)) if current_page_number < 34: current_page = paginator.page(current_page_number) elif current_page_number < 0: current_page = paginator.page(current_page_number) else: current_page = paginator.page(1) except EmptyPage as e: current_page = paginator.page(1)
index.html
当前页面为 {% %} {{ .}} ---{{ .}} {% %}
访问展示
超出34 页面默认显示首页
功能四、引入bootstrap 和 分页 格式 丰富样式
views
def index(request): # 分页器 book_list = Book.objects.all() paginator = Paginator(book_list, 10) # 每页显示三条数据 print(paginator, type(paginator)) page_range = paginator.page_range print("count:", paginator.count) # 数据总数 print("num_pages", paginator.num_pages) # 总页数 print("page_range", paginator.page_range) # 页码的列表 # 根据请求页面数显示不同页面的数据,不存在的页面数据就显示首页 try: current_page_num= int(request.GET.get("page", 1)) current_page = paginator.page(current_page_num) print(current_page, type(current_page)) print("object_list", current_page.object_list) except EmptyPage as e: current_page = paginator.page(1) return render(request, "index.html", locals())
index 页面
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title> index</title> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> </head> <body> <br> <p> 当前页面为 </p> <ul> {% for book in current_page %} <li>{{ book.title }}:{{ book.price }}</li> {% endfor %} </ul> <p> 显示页码 </p> <nav aria-label="Page navigation"> <ul class="pagination"> <li> <a href="#" aria-label="Previous"> <span aria-hidden="true"> 上一页</span> </a> </li> <p> 循环遍历 页码数 </p> {% for item in paginator.page_range %} <p> 当显示当前页面的时候加蓝 </p> {% if current_page_num == item %} <li class="active"><a href="?page={{ item }}"> {{ item }} </a> </li> {% else %} <li><a href="?page={{ item }}"> {{ item }} </a> </li> {% endif %} {% endfor %} <li> <a href="#" aria-label="Next"> <span aria-hidden="true"> 下一页 </span> </a> </li> </ul> </nav> </body> </html>
页面效果
显示上一页,下一页
# 根据循环当前的页面 进行判断 current_page
上一页使用 current_page|add:-1 或者 current_page.previous_page_number
下一页 使用 current_page|add:+1 或者 current_page.next_page_number
<li> {% if current_page.has_previous %} <a href="?page ={{ current_page|add:-1 }}" aria-label="Previous"> {# <a href="?page ={{ current_page.previous_page_number }}" aria-label="Previous">#} <span aria-hidden="true"> 上一页</span> </a> {% else %} <li class="disabled"><a href="" aria-label="Previous"><span aria-hidden="true">上一页</span></a></li> {% endif %} </li> <li> {% if current_page.has_next %} <a href="?page= {{ current_page|add:+1}}" aria-label="Next"> {# <a href="?page= {{ current_page.next_page_number }}" aria-label="Next">#} <span aria-hidden="true"> 下一页 </span> </a> {% else %} <li class="disabled"><a href="" aria-label="Next"><span aria-hidden="true">下一页</span></a> {% endif %} </li>
查看页面
显示默认的五页
views 代码
if paginator.num_pages > 11: if current_page_num - 5 < 1: page_range = range(1, 12) elif current_page_num + 5 > paginator.num_pages: page_range = range(paginator.num_pages - 10, paginator.num_pages + 1) else: page_range = range(current_page_num - 5, current_page_num + 6) else: page_range = paginator.page_range
html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title> index</title> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> </head> <body> <br> <p> 当前页面为 </p> <ul> {% for book in current_page %} <li>{{ book.title }}:{{ book.price }}</li> {% endfor %} </ul> <p> 显示页码 </p> <nav aria-label="Page navigation"> <ul class="pagination"> <li> {% if current_page.has_previous %} <a href="?page ={{ current_page|add:-1 }}" aria-label="Previous"> {# <a href="?page ={{ current_page.previous_page_number }}" aria-label="Previous">#} <span aria-hidden="true"> 上一页</span> </a> {% else %} <li class="disabled"><a href="" aria-label="Previous"><span aria-hidden="true">上一页</span></a></li> {% endif %} </li> {% for item in page_range %} {% if current_page_num == item %} <li class="active"><a href="?page={{ item }}">{{ item }}</a></li> {% else %} <li><a href="?page={{ item }}">{{ item }}</a></li> {% endif %} {% endfor %} <LI> {%ならcurrent_page.has_next%} <a href="?page= {{ current_page|add:+1}}" aria-label="Next"> {#は、<a href = "?ページ= {{ current_page.next_page_number}}」ARIAラベル= "次へ">#} <スパンARIA-隠さ= "真の">下一页</ span>の </a>の {%他%} <LIクラス= "無効"> <a href="" aria-label="Next"> <スパンARIA-隠れ= "真">下一页</スパン> </a>の {%のENDIFの%} </ LI> </ UL> </ NAV> </ BODY> </ HTML>
ページ表示