Django實現網頁分頁功能

阿新 • • 發佈：2020-01-09

本文例項為大家分享了Django實現分頁功能，為了容易區別功能的展現，先建立一個數據庫，用資料庫中的資料做演示。

建立資料庫步驟如下：

1.建立模型，程式碼如下：

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.向資料庫中新增資料，程式碼如下：

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='該商品物美價廉，現在只需要{}元'.format(random.randint(10,100)))
  good.save()
 return HttpResponse('資料新增成功')

新增之後將程式碼就可以註釋掉了，我們演示的時候再新建一個select介面作為演示介面。

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

# Create your views here.

def select(request):
 # 查詢資料庫中的所有資料
 good_list = Goods.objects.all()
 # 值1：所有的資料
 # 值2：每一頁的資料
 # 值3：當最後一頁資料少於n條，將資料併入上一頁
 paginator = Paginator(good_list,12,3)

 try:
  # GET請求方式，get()獲取指定Key值所對應的value值
  # 獲取index的值，如果沒有，則設定使用預設值1
  num = request.GET.get('index','1')
  # 獲取第幾頁
  number = paginator.page(num)
 except PageNotAnInteger:
  # 如果輸入的頁碼數不是整數，那麼顯示第一頁資料
  number = paginator.page(1)
 except EmptyPage:
  number = paginator.page(paginator.num_pages)

 # 將當前頁頁碼，以及當前頁資料傳遞到index.html
 return render(request,'index.html',{'page':number,'paginator':paginator})

下面我們在index.html做介面處理，這裡是需要用到bootstraps，三個檔案如下圖所示，前面講解過。

來到index.html檔案，做如下設定：

{% 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">
  {# 如果當前頁還有上一頁 #}
  {% if page.has_previous %}
   <li>
    {# 點選a標籤，跳轉到上一頁連結 ?index 為地址後面拼接的引數 #}
    <a href="?index={{page.previous_page_number}}" >上一頁</a>
   </li>
  {% else %}
   {# 如果沒有上一頁， 則上一頁按鈕不可點選 #}
   <li class="disabled">
    <a href="#">上一頁</a>
   </li>
  {% endif %}

  {% for page_number in paginator.page_range %}
   {# 獲取當前頁的頁碼 #}
   {% if page_number == page.number %}
    {# 如果是當前頁的話，選中 #}
    <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}}">下一頁</a>
   </li>
  {% else %}
  <li class="disabled">
   <a href="#" >下一頁</a>
  </li>
  {% endif %}
 </ul>

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

顯示效果如下：