使用django自带的Paginator分页器集合bootstrap的pagination控件可以实现分页功能,
如果页数较大的时候,希望能显示省略号+当前页,这样看起来更美观一点。
自定义一个分页功能,当分页导航栏数量很多时,多的页码显示省略号...,传3个参数
def pagination_function(paginator, page, is_paginated=True): if not is_paginated: # 如果没有分页,则无需显示分页导航条,不用任何分页导航条的数据,因此返回一个空的字典 return {} # 当前页左边连续的页码号,初始值为空 left = [] # 当前页右边连续的页码号,初始值为空 right = [] # 标示第 1 页页码后是否需要显示省略号 left_has_more = False # 标示最后一页页码前是否需要显示省略号 right_has_more = False # 标示是否需要显示第 1 页的页码号。 # 因为如果当前页左边的连续页码号中已经含有第 1 页的页码号,此时就无需再显示第 1 页的页码号, # 其它情况下第一页的页码是始终需要显示的。 # 初始值为 False first = False # 标示是否需要显示最后一页的页码号。 # 需要此指示变量的理由和上面相同。 last = False # 获得用户当前请求的页码号 page_number = page.number # 获得分页后的总页数 total_pages = paginator.num_pages # 获得整个分页页码列表,比如分了四页,那么就是 [1, 2, 3, 4] page_range = paginator.page_range if page_number == 1: # 如果用户请求的是第一页的数据,那么当前页左边的不需要数据,因此 left=[](已默认为空)。 # 此时只要获取当前页右边的连续页码号, # 比如分页页码列表是 [1, 2, 3, 4],那么获取的就是 right = [2, 3]。 # 注意这里只获取了当前页码后连续两个页码,你可以更改这个数字以获取更多页码。 right = page_range[page_number:page_number + 2] # 如果最右边的页码号比最后一页的页码号减去 1 还要小, # 说明最右边的页码号和最后一页的页码号之间还有其它页码,因此需要显示省略号,通过 right_has_more 来指示。 if right[-1] < total_pages - 1: right_has_more = True # 如果最右边的页码号比最后一页的页码号小,说明当前页右边的连续页码号中不包含最后一页的页码 # 所以需要显示最后一页的页码号,通过 last 来指示 if right[-1] < total_pages: last = True elif page_number == total_pages: # 如果用户请求的是最后一页的数据,那么当前页右边就不需要数据,因此 right=[](已默认为空), # 此时只要获取当前页左边的连续页码号。 # 比如分页页码列表是 [1, 2, 3, 4],那么获取的就是 left = [2, 3] # 这里只获取了当前页码后连续两个页码,你可以更改这个数字以获取更多页码。 left = page_range[(page_number - 3) if (page_number - 3) > 0 else 0:page_number - 1] # 如果最左边的页码号比第 2 页页码号还大, # 说明最左边的页码号和第 1 页的页码号之间还有其它页码,因此需要显示省略号,通过 left_has_more 来指示。 if left[0] > 2: left_has_more = True # 如果最左边的页码号比第 1 页的页码号大,说明当前页左边的连续页码号中不包含第一页的页码, # 所以需要显示第一页的页码号,通过 first 来指示 if left[0] > 1: first = True else: # 用户请求的既不是最后一页,也不是第 1 页,则需要获取当前页左右两边的连续页码号, # 这里只获取了当前页码前后连续两个页码,你可以更改这个数字以获取更多页码。 left = page_range[(page_number - 3) if (page_number - 3) > 0 else 0:page_number - 1] right = page_range[page_number:page_number + 2] # 是否需要显示最后一页和最后一页前的省略号 if right[-1] < total_pages - 1: right_has_more = True if right[-1] < total_pages: last = True # 是否需要显示第 1 页和第 1 页后的省略号 if left[0] > 2: left_has_more = True if left[0] > 1: first = True data = { 'left': left, 'right': right, 'left_has_more': left_has_more, 'right_has_more': right_has_more, 'first': first, 'last': last, } return data
参考博客https://www.zmrenwu.com/courses/django-blog-tutorial/materials/21/
视图函数返回模板所需要的对象
# 作者-上海悠悠 QQ交流群:717225969 # blog地址 https://www.cnblogs.com/yoyoketang/ from django.core.paginator import Paginator, PageNotAnInteger, EmptyPage def teachersViewP(request): teachers = Teacher.objects.all() paginator = Paginator(teachers, per_page=10) page_num = request.GET.get('page', 1) try: page_num = int(page_num) except: page_num = 1 if page_num<1 or page_num>paginator.num_pages: page_num = 1 is_paginated = True page_object = paginator.get_page(page_num) data = pagination_function(paginator, page_object, is_paginated) return render(request, 'teacher.html', locals())
模板结合bootstrap框架实现前端分页展示
# 作者-上海悠悠 QQ交流群:717225969 # blog地址 https://www.cnblogs.com/yoyoketang/ <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Bootstrap 实例 - 分页的状态</title> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h3>分页器加载table表格</h3> <table class="table table-striped"> <thead> <tr> <th>姓名</th> <th>年龄</th> <th>电话</th> </tr> </thead> <tbody> {% for field in page_object %} <tr> <td>{{ field.name }}</td> <td>{{ field.age }}</td> <td>{{ field.tel }}</td> </tr> {% endfor %} </tbody> </table> {% if is_paginated %} <ul class="pagination pull-right"> {% endif %} {#上一页按钮开始#} {# 如果当前页有上一页#} {% if page_object.has_previous %} {# 当前页的上一页按钮正常使用#} <li class="previous"><a href="?page={{ page_object.previous_page_number }}">上一页</a></li> {% else %} {# 当前页的不存在上一页时,上一页的按钮不可用#} <li class="previous disabled"><a href="#">上一页</a></li> {% endif %} {#上一页按钮结束#} {% if data.first %} <li class="page"><a href="?page=1">1</a></li> {% endif %} {% if data.left %} {% if data.left_has_more %} <li class="page"><a href="javascript:void(0)">...</a></li> {% endif %} {% for i in data.left %} <li class="page"><a href="?page={{ i }}">{{ i }}</a></li> {% endfor %} {% endif %} <li class="page active" ><a href="javascript:void(0)"> {{ page_num }}</a></li> {% if data.right %} {% for i in data.right %} <li class="page"><a href="?page={{ i }}">{{ i }}</a></li> {% endfor %} {% if data.right_has_more %} <li class="page"><a href="javascript:void(0)">...</a></li> {% endif %} {% endif %} {% if data.last %} <li class="page"><a href="?page={{ paginator.num_pages }}">{{ paginator.num_pages }}</a> </li> {% endif %} {% if page_object.has_next %} <li class="next"><a href="?page={{ page_object.next_page_number }}">下一页</a></li> {% else %} <li class="next disabled"><a href="#">下一页</a></li> {% endif %} {# 下一页按钮结束#} </ul> </div> </body> </html>
页码效果展示
中间页码分页导航显示