1. 程式人生 > >比Django官方實現更好的分頁元件+Bootstrap整合

比Django官方實現更好的分頁元件+Bootstrap整合

## 前言 Django全家桶自帶的分頁元件只能說能滿足分頁這個功能,但是沒那麼好用就是了 #### Django的分頁效果 ![](https://upload-images.jianshu.io/upload_images/8869373-73cfb4a57d038070.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240) #### `django-pure-pagination`分頁效果 ![](https://upload-images.jianshu.io/upload_images/8869373-7370d6aef616ca6d.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240) ## 使用方法 首先安裝: ``` pip install django-pure-pagination ``` 新增到App ```python INSTALLED_APPS = ( ... 'pure_pagination', ) ``` 配置一下,配置說明如圖 ![](https://upload-images.jianshu.io/upload_images/8869373-47be1d4a69b56cec.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240) ```python PAGINATION_SETTINGS = { 'PAGE_RANGE_DISPLAYED': 10, 'MARGIN_PAGES_DISPLAYED': 2, 'SHOW_FIRST_PAGE_WHEN_INVALID': True, } ``` ### 檢視程式碼例子 ```python from django.shortcuts import render from pure_pagination import Paginator from .models import Video def all_video(request): video_list = Video.objects.all() paginator_obj = Paginator(video_list, 10, request=request) ctx = { 'page': paginator_obj.page(request.GET.get('page', 1)), } return render(request, 'video_list.html', context=ctx) ``` ### 模板程式碼 注意這個`django-pure-pagination`的`Paginator`物件和Django內建的`Paginator`有點不同,在用法上不同。 Django內建的`Paginator`本身就是迭代器了,直接`for item in page`就行,但是`django-pure-pagination`不同,得`for item in page.object_list`,這個區別注意一哈~ 因此,`django-pure-pagination`需要這樣遍歷頁面內的物件: ```jinja {% for video in page.object_list %} {% include "widgets/video_card.html" %} {% empty %} 視訊列表獲取為空! {% endfor %} ``` #### 分頁器的HTML程式碼 這裡最好是單獨寫一個`paginator.html`,作為Django模板元件,然後其他頁面可以很方便的使用`{% includ "paginator.html" %}`引入 ```jinja {% load i18n %} {% if page.paginator.num_pages > 1 %} {% endif %} ``` #### 最終實現的效果 ![](https://upload-images.jianshu.io/upload_images/8869373-7370d6aef616ca6d.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240) ## 參考資料 - 官網:https://github.com/jamespacileo/django-pure-pagination/ ## 歡迎交流 程式設計實驗室專注於網際網路熱門新技術探索與團隊敏捷開發實踐,在公眾號「程式設計實驗室」後臺回覆 linux、flutter、c#、netcore、android、kotlin、java、python 等可獲取相關技術文章和資料,同時有任何問題都可以在公眾號後臺留言~ ![](https://upload-images.jianshu.io/upload_images/8869373-95124b6a85ede43d.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240) - 部落格園:[https://www.cnblogs.com/deali/](https://www.cnblogs.com/deali/) - 打程式碼直播間:[https://live.bilibili.com/11883038](https://live.bilibili.com/11883038) - 知乎:[https://www.zhihu.com/people/dealiaxy](https://www.zhihu.com/people/de