Django前端BootCSS實(shí)現(xiàn)分頁的方法
發(fā)布日期：2021-12-15 04:18 | 文章來源：源碼中國
通過使用bootstrap框架，并配合Django自帶的Paginator分頁組件即可實(shí)現(xiàn)簡(jiǎn)單的分頁效果。
1.創(chuàng)建MyWeb項(xiàng)目
python manage.py startapp MyWeb
2.修改settings.py配置文件,導(dǎo)入我們的app的名字，去掉csrf這個(gè)選項(xiàng)
# 屏蔽一項(xiàng) MIDDLEWARE = [ #'django.middleware.csrf.CsrfViewMiddleware' ] # 新增一項(xiàng) TEMPLATES = [ 'MyWeb.apps.MywebConfig' ]
3.來urls.py里面寫一條路由，名字就叫index/映射到views.index函數(shù)下處理此請(qǐng)求
from MyWeb import views
urlpatterns = [
path('admin/', admin.site.urls),
path('index/', views.index)
]
4.最后在myweb里面的views.py設(shè)置一個(gè)視圖函數(shù),最后運(yùn)行
from django.shortcuts import render
from django.shortcuts import HttpResponse
from MyWeb import models
def index(requests):
return HttpResponse("abcd")
5.配置數(shù)據(jù)庫文件models.py并設(shè)置以下內(nèi)容
from django.db import models # 創(chuàng)建用戶表 class User(models.Model): id = models.AutoField(primary_key=True) username = models.CharField(max_length=32) password = models.CharField(max_length=32)
6.更新數(shù)據(jù)庫與數(shù)據(jù)表
python manage.py makemigrations# 將你的數(shù)據(jù)庫變動(dòng)記錄下來(并不會(huì)幫你創(chuàng)建表) python manage.py migrate # 將你的數(shù)據(jù)庫變動(dòng)正在同步到數(shù)據(jù)庫中
7.增加一個(gè)新的view并使用rand()函數(shù).
首先在urls.py中增加路由
from django.contrib import admin
from django.urls import path
from MyWeb import views
urlpatterns = [
path('admin/', admin.site.urls),
path('index/',views.index),
path('rand/',views.rand)
]
其次在view.py視圖中增加生成函數(shù).
from django.shortcuts import render
from django.shortcuts import HttpResponse
from MyWeb import models
import random
# 首頁
def index(requests):
return HttpResponse("abcd")
# 生成測(cè)試數(shù)據(jù)
def rand(request):
for i in range(1,1000):
chars = []
pasd = []
for x in range(1,8):
chars.append(random.choice('abcdefghijklmnopqrstuvwxyz'))
pasd.append(random.choice('0987654321'))
user = "".join(chars)
pwd = "".join(pasd)
models.User.objects.create(username=user, password=pwd)
return HttpResponse("ok")
啟動(dòng)django并訪問http://127.0.0.1:8000/rand/等待數(shù)據(jù)生成結(jié)束.
8.在templates模板中，新增一個(gè)page.html頁面。
<!--name: page.html-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" rel="external nofollow" >
</head>
<body>
<table class="table table-sm table-hover">
<thead>
<tr class="table-success">
<th> 序號(hào)</th> <th> 用戶名</th> <th> 用戶密碼</th>
</tr>
</thead>
<tbody>
{% for article in user_list %}
<tr class="table-primary">
<td>{{ article.id }}</td>
<td>{{ article.username }}</td>
<td>{{ article.password }}</td>
</tr>
{% endfor %}
</tbody>
</table>
<nav class="d-flex justify-content-center" aria-label="Page navigation example">
<ul class="pagination">
<li class="page-item"><a class="page-link" href="./page?id=1" rel="external nofollow" >首頁</a></li>
{% if user_list.has_previous %}
<li class="page-item"><a class="page-link" href="./page?id={{ user_list.previous_page_number }}" rel="external nofollow" >上一頁</a></li>
{% else %}
<li class="page-item disabled"><a class="page-link" href="#" rel="external nofollow" rel="external nofollow" >上一頁</a></li>
{% endif %}
{% for item in page_range %}
{% if item == currentPage %}
<li class="page-item active"><a class="page-link" href="./page?id={{ item }}" rel="external nofollow" rel="external nofollow" >{{ item }}</a></li>
{% else %}
<li class="page-item"><a class="page-link" href="./page?id={{ item }}" rel="external nofollow" rel="external nofollow" >{{ item }}</a></li>
{% endif %}
{% endfor %}
{% if user_list.has_next %}
<li class="page-item"><a class="page-link" href="./page?id={{ user_list.next_page_number }}" rel="external nofollow" >下一頁</a></li>
{% else %}
<li class="page-item disabled"><a class="page-link" href="#" rel="external nofollow" rel="external nofollow" >下一頁</a></li>
{% endif %}
<li class="page-item"><a class="page-link" href="./page?id={{ paginator.num_pages }}" rel="external nofollow" >尾頁</a></li>
</ul>
</nav>
<div style="text-align: center;" class="alert alert-dark">
統(tǒng)計(jì): {{ currentPage }}/{{ paginator.num_pages }} 共查詢到:{{ paginator.count }} 條數(shù)據(jù) 頁碼列表:{{ paginator.page_range }}
</div>
</body>
</html>
9.最后在路由曾以及view中增加對(duì)應(yīng)的URL以及路由函數(shù).
首先在urls.py中增加一條新路由.
from django.contrib import admin
from django.urls import path
from MyWeb import views
urlpatterns = [
path('admin/', admin.site.urls),
path('index/',views.index),
path('rand/',views.rand),
path('page',views.page)
]
接著在views.py中增加一個(gè)page函數(shù).
from django.shortcuts import render
from django.shortcuts import HttpResponse
from MyWeb import models
import random
from django.core.paginator import Paginator, EmptyPage, PageNotAnInteger
# 首頁
def index(requests):
return HttpResponse("abcd")
# 生成測(cè)試數(shù)據(jù)
def rand(request):
for i in range(1,1000):
chars = []
pasd = []
for x in range(1,8):
chars.append(random.choice('abcdefghijklmnopqrstuvwxyz'))
pasd.append(random.choice('0987654321'))
user = "".join(chars)
pwd = "".join(pasd)
models.User.objects.create(username=user, password=pwd)
return HttpResponse("ok")
# 分頁函數(shù)
def page(request):
user = models.User.objects.all()
paginator = Paginator(user, 10)
currentPage = int(request.GET.get("id",1))
if paginator.num_pages > 15:
if currentPage-5 < 1:
pageRange = range(1,11)
elif currentPage+5 > paginator.num_pages:
pageRange = range(currentPage-5,paginator.num_pages)
else:
pageRange = range(currentPage-5,currentPage+5)
else:
pageRange = paginator.page_range
try:
user_list = paginator.page(currentPage)
except PageNotAnInteger:
user_list = paginator.page(1)
except:
user_list = paginator.page(paginator.num_pages)
return render(request,"page.html",{"user_list":user_list,
"paginator":paginator,
"page_range":pageRange,
"currentPage":currentPage})
準(zhǔn)備就緒之后，直接訪問http://127.0.0.1:8000/page即可看到分頁顯示效果.
到此這篇關(guān)于Django前端BootCSS實(shí)現(xiàn)分頁的方法的文章就介紹到這了,更多相關(guān)Django BootCSS分頁內(nèi)容請(qǐng)搜索本站以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持本站！
版權(quán)聲明：本站文章來源標(biāo)注為YINGSOO的內(nèi)容版權(quán)均為本站所有，歡迎引用、轉(zhuǎn)載，請(qǐng)保持原文完整并注明來源及原文鏈接。禁止復(fù)制或仿造本網(wǎng)站，禁止在非www.sddonglingsh.com所屬的服務(wù)器上建立鏡像，否則將依法追究法律責(zé)任。本站部分內(nèi)容來源于網(wǎng)友推薦、互聯(lián)網(wǎng)收集整理而來，僅供學(xué)習(xí)參考，不代表本站立場(chǎng)，如有內(nèi)容涉嫌侵權(quán)，請(qǐng)聯(lián)系alex-e#qq.com處理。
相關(guān)文章
關(guān)注官方微信