快捷導(dǎo)航

Django實(shí)現(xiàn)網(wǎng)頁(yè)分頁(yè)功能

更新時(shí)間：2019年10月31日 14:20:55 作者：回憶不說話

這篇文章主要介紹了Django實(shí)現(xiàn)網(wǎng)頁(yè)分頁(yè)功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了Django實(shí)現(xiàn)分頁(yè)功能，為了容易區(qū)別功能的展現(xiàn)，先創(chuàng)建一個(gè)數(shù)據(jù)庫(kù)，用數(shù)據(jù)庫(kù)中的數(shù)據(jù)做演示。

創(chuàng)建數(shù)據(jù)庫(kù)步驟如下：

1.創(chuàng)建模型，代碼如下：

from django.db import models

# Create your models here.
class Goods(models.Model):
 name = models.CharField(max_length=100)
 des = models.CharField(max_length=1000)
 class Meta:
  db_table = 'goods'

2.向數(shù)據(jù)庫(kù)中添加數(shù)據(jù)，代碼如下：

from django.http import HttpResponse

from .models import Goods
import random
# Create your views here.

def index(request):
 for x in range(200):
  good = Goods(name='good%s'%x,des='該商品物美價(jià)廉，現(xiàn)在只需要{}元'.format(random.randint(10,100)))
  good.save()
 return HttpResponse('數(shù)據(jù)添加成功')

添加之后將代碼就可以注釋掉了，我們演示的時(shí)候再新建一個(gè)select接口作為演示界面。

from django.shortcuts import render
from django.core.paginator import Paginator , PageNotAnInteger,EmptyPage

# Create your views here.

def select(request):
 # 查詢數(shù)據(jù)庫(kù)中的所有數(shù)據(jù)
 good_list = Goods.objects.all()
 # 值1：所有的數(shù)據(jù)
 # 值2：每一頁(yè)的數(shù)據(jù)
 # 值3：當(dāng)最后一頁(yè)數(shù)據(jù)少于n條，將數(shù)據(jù)并入上一頁(yè)
 paginator = Paginator(good_list,12,3)

 try:
  # GET請(qǐng)求方式，get()獲取指定Key值所對(duì)應(yīng)的value值
  # 獲取index的值，如果沒有，則設(shè)置使用默認(rèn)值1
  num = request.GET.get('index','1')
  # 獲取第幾頁(yè)
  number = paginator.page(num)
 except PageNotAnInteger:
  # 如果輸入的頁(yè)碼數(shù)不是整數(shù)，那么顯示第一頁(yè)數(shù)據(jù)
  number = paginator.page(1)
 except EmptyPage:
  number = paginator.page(paginator.num_pages)

 # 將當(dāng)前頁(yè)頁(yè)碼，以及當(dāng)前頁(yè)數(shù)據(jù)傳遞到index.html
 return render(request,'index.html',{'page':number,'paginator':paginator})

下面我們?cè)趇ndex.html做界面處理，這里是需要用到bootstraps，三個(gè)文件如下圖所示，前面講解過。

來到index.html文件，做如下設(shè)置：

{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <link rel="stylesheet" href="{% static 'css/bootstrap.css' %}" >
 <!--<link rel="stylesheet" href="">-->
 <title>淘寶</title>
</head>
<body>
 {% for good in page.object_list %}
  <h4>{{good.name}} - {{good.des}}</h4>
 {% endfor %}
 <ul class="pagination">
  {# 如果當(dāng)前頁(yè)還有上一頁(yè) #}
  {% if page.has_previous %}
   <li>
    {# 點(diǎn)擊a標(biāo)簽，跳轉(zhuǎn)到上一頁(yè)鏈接 ?index 為地址后面拼接的參數(shù) #}
    <a href="?index={{page.previous_page_number}}" >上一頁(yè)</a>
   </li>
  {% else %}
   {# 如果沒有上一頁(yè)， 則上一頁(yè)按鈕不可點(diǎn)擊 #}
   <li class="disabled">
    <a href="#">上一頁(yè)</a>
   </li>
  {% endif %}

  {% for page_number in paginator.page_range %}
   {# 獲取當(dāng)前頁(yè)的頁(yè)碼 #}
   {% if page_number == page.number %}
    {# 如果是當(dāng)前頁(yè)的話，選中 #}
    <li class="active">
     <a href="?index={{page_number}}">{{page_number}}</a>
    </li>
   {% else %}
    <li>
     <a href="?index={{page_number}}">{{page_number}}</a>
    </li>
   {% endif %}
  {% endfor %}

  {% if page.has_next %}
   <li>
    <a href="?index={{page.next_page_number}}">下一頁(yè)</a>
   </li>
  {% else %}
  <li class="disabled">
   <a href="#" >下一頁(yè)</a>
  </li>
  {% endif %}
 </ul>

 <script src="{% static 'js/jquery.js' %}"></script>
 <script src="{% static 'js/bootstrap.js' %}"></script>
</body>
</html>

顯示效果如下：