比Django官方实现更好的分页组件+Bootstrap整合

Django全家桶自带的分页组件只能说能满足分页这个功能,但是没那么好用就是了

Django的分页效果

比Django官方实现更好的分页组件+Bootstrap整合

django-pure-pagination分页效果

比Django官方实现更好的分页组件+Bootstrap整合

使用方法

首先安装:

pip install django-pure-pagination

添加到App

INSTALLED_APPS = ( ... 'pure_pagination', )

配置一下,配置说明如图

比Django官方实现更好的分页组件+Bootstrap整合

PAGINATION_SETTINGS = { 'PAGE_RANGE_DISPLAYED': 10, 'MARGIN_PAGES_DISPLAYED': 2, 'SHOW_FIRST_PAGE_WHEN_INVALID': True, } 视图代码例子 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需要这样遍历页面内的对象:

{% for video in page.object_list %} {% include "widgets/video_card.html" %} {% empty %} <div role="alert"> 视频列表获取为空! </div> {% endfor %} 分页器的HTML代码

这里最好是单独写一个paginator.html,作为Django模板组件,然后其他页面可以很方便的使用{% includ "paginator.html" %}引入

{% load i18n %} {% if page.paginator.num_pages > 1 %} <nav aria-label="Page navigation example"> <ul> {% if page.has_previous %} <li> <a href="?{{ page.previous_page_number.querystring }}">&lsaquo;&lsaquo; {% trans "previous" %}</a> </li> {% else %} <li> <span>&lsaquo;&lsaquo; {% trans "previous" %}</span> </li> {% endif %} {% for p in page.pages %} {% if p %} {% ifequal p page.number %} <li> <span>{{ p }}</span> </li> {% else %} <li> <a href="?{{ p.querystring }}">{{ p }}</a> </li> {% endifequal %} {% else %} <li> <span>...</span> </li> {% endif %} {% endfor %} {% if page.has_next %} <li> <a href="?{{ page.next_page_number.querystring }}">{% trans "next" %} &rsaquo;&rsaquo;</a> </li> {% else %} <li> <span>{% trans "next" %} &rsaquo;&rsaquo;</span> </li> {% endif %} </ul> </nav> {% endif %} 最终实现的效果

比Django官方实现更好的分页组件+Bootstrap整合

参考资料

官网:https://github.com/jamespacileo/django-pure-pagination/

欢迎交流

程序设计实验室专注于互联网热门新技术探索与团队敏捷开发实践,在公众号「程序设计实验室」后台回复 linux、flutter、c#、netcore、android、kotlin、java、python 等可获取相关技术文章和资料,同时有任何问题都可以在公众号后台留言~

比Django官方实现更好的分页组件+Bootstrap整合

博客园:https://www.cnblogs.com/deali/

打代码直播间:https://live.bilibili.com/11883038

知乎:https://www.zhihu.com/people/dealiaxy

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wpyzyp.html