django表格分頁與bootstrap的使用
一、django專案中引用bootstrap
1、首先下載bootsrtap程式碼,將下載後的檔案放在project下新建立的static目錄下。下載jquery放在static/bootstrap/js/目錄下。
2、在templates中，新建base.html。。
3、在templates中建立book.html，並繼承base.html模版。
{% extends 'base.html' %}
目錄結構為:
4、修改全域性setting檔案，新增靜態檔案路徑。
STATIC_URL = '/static/' #若存放靜態檔案的static目錄在app目錄下，則STATIC_URL生效，無需定義下面的
STATICFILES_DIRS = [ ＃若存放靜態檔案的static目錄在project目錄下，則STATICFILES_DIRS生效
os.path.join(BASE_DIR, "static"),
]
5、設定url
在url中設定轉發規則
from django.contrib import admin from django.urls import path,re_path from mysite import views urlpatterns = [ path('admin/', admin.site.urls), re_path(r'^book', views.bookhandle, name="book") ]
6、定義檢視函式 views.py
from django.shortcuts import render from mysite import models from django.core.paginator import Paginator,PageNotAnInteger,EmptyPage # Create your views here. def bookhandle(request): bookdic = models.bookHandle.objects.all() returnrender(request, 'book.html',{'book_list':bookdic })
7、修改bash.html中引用boostrap檔案，定義鉤子
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="../static/bootstrap/css/bootstrap.min.css"> <script src="../static/bootstrap/js/jquery-3.2.0.min.js"></script> <script src="../static/bootstrap/js/bootstrap.min.js"></script> <script src="../static/bootstrap/js/holder.min.js"></script> <title>base</title> </head> <body> <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main"> {% block booklist %} page content {% endblock %} </div> </body> </html>
二、book.html
1、新建book.html頁面，用來展示book列表。該頁面繼承父模版base.html,並實現鉤子。
{% extends 'base.html' %} {% block booklist %} <h3>書籍列表</h3> <table class="table table-striped"> <thead> <tr> <th>書名</th> <th>簡介</th> <th>出版社</th> <th>價格</th> <th>狀態</th> </tr> </thead> <tbody> {% for foo in book_list %} <tr> <td>{{ foo.bookname }}</td> <td>{{ foo.sumary }}</td> <td>{{ foo.publisher }}</td> <td>{{ foo.price }}</td> <td>{{ foo.status }}</td> </tr> {% endfor %} </tbody> </table> {% endblock %}
2、在static/bootstrap/css目錄下建立用於顯示不同狀態底色的樣式檔案status_color.css，每個類標籤的名字即資料庫中客戶狀態的欄位
.soldout{ background-color: orange; } .available{ background-color: greenyellow; }
3、在base.html中新增對status_color.css樣式的引用
<link rel="stylesheet" href="../static/bootstrap/css/status_color.css">
book.html顯示效果為:
三、分頁顯示
1、修改views中bookhandle函式
from django.shortcuts import render from mysite import models from django.core.paginator import Paginator,PageNotAnInteger,EmptyPage # Create your views here. def bookhandle(request): bookdic = models.bookHandle.objects.all() paginator=Paginator(bookdic,2) #每頁顯示2條 page=request.GET.get('page') #前段請求的頁,比如點選'下一頁',該頁以變數'page'表示 try: book_obj=paginator.page(page) #獲取前端請求的頁數 except PageNotAnInteger: book_obj=paginator.page(1) #如果前端輸入的不是數字,就返回第一頁 except EmptyPage: book_obj=paginator.page(paginator.num_pages) #如果前端請求的頁碼超出範圍,則顯示最後一頁.獲取總頁數,返回最後一頁.比如共10頁,則返回第10頁. return render(request, 'book.html',{'book_list':book_obj})
2、修改前端顯示頁面
在表格後面新增
<div class="pagination"> <span class="step-links"> {% if book_list.has_previous %} <!--如果有上一頁--> <a href="?page={{ book_list.previous_page_number }}">上一頁</a> <!--點選時超連結到上一頁--> {% endif %} <span class="current"> Page{{ book_list.number }} of {{ book_list.paginator.num_pages }} <!--customers_list.number為當前頁碼,customers_list.paginator.num_pages為總頁碼數--> </span> {% if book_list.has_next %} <!--如果有下一頁--> <a href="?page={{ book_list.next_page_number }}">下一頁</a> <!--點選時超連結到下一頁--> {% endif %} </span> </div>
效果如下圖: