django的分页

Posted 2020-08-26 反差萌·萌小新

一.分页器的函数封装

# 分页计算最小页和最大页
def page_list_return(total, current=1):
    \'\'\'
    分页,返回本次分页的最小页数和最大页数列表
    :param total:
    :param current:
    :return:
    \'\'\'
    min_page = current - 2 if current - 4 > 0 else 1
    max_page = current + 4 if current + 4 < total else total
    return list(range(min_page, max_page + 1))


# 分页器
def pages(post_objects, request):
    \'\'\'
    分页公共函数,返回分页的对象元组
    :param post_objects:
    :param request:
    :return:
    \'\'\'
    # 分页器
    paginator = Paginator(post_objects, 10)
    try:
        # 本页页码
        current_page = int(request.GET.get(\'page\', \'1\'))
    except ValueError:
        current_page = 1
    # 所有页码
    page_range = page_list_return(len(paginator.page_range), current_page)
    try:
        # 本页对象
        page_objects = paginator.page(current_page)
    except (EmptyPage, InvalidPage):
        page_objects = paginator.page(paginator.num_pages)

    if current_page >= 5:
        show_first = 1
    else:
        show_first = 0
    if current_page <= (len(paginator.page_range) - 3):
        show_end = 1
    else:
        show_end = 0
    # 所有对象,分页器,本页对象,所有页码,本业页码,是否显示第一页,是否显示最后一页
    return post_objects, paginator, page_objects, page_range, current_page, show_first, show_end

View Code

二.view页面的传递

def menu_list(request):
    header_title, path = \'菜单详情\', \'菜单详情\'
    menus_list = MenuInfo.objects.all()
    menus_list, p, page_obj, page_range, current_page, show_first, show_end = pages(menus, request)  
    return render(request, \'menu/menu_list.html\',locals())

View Code

 

三.前端页面的代码

<div class="col-sm-7">
    <div class="dataTables_paginate paging_simple_numbers" id="editable_paginate">
        <ul class="pagination">
            {% if page_obj.has_previous %}
                <li class="paginate_button previous " id="editable_previous">
                    <a class="page" href="?page={{ page_obj.previous_page_number }}" aria-controls="editable"
                       data-dt-idx="0"
                       tabindex="0">上一页</a>
                </li>

            {% else %}
                <li class="paginate_button previous disabled" id="editable_previous">
                    <a class="page"  aria-controls="example1" data-dt-idx="0" tabindex="0">上一页</a>
                </li>
            {% endif %}
            {% ifequal show_first 1 %}
                <li class="paginate_button">
                    <a class="page" href="?page=1" aria-controls="editable" data-dt-idx="1" tabindex="0">1..</a>
                </li>
            {% endifequal %}

            {% for page in page_range %}
                {% ifequal current_page page %}
                    <li class="paginate_button active">
                        <a class="page" href="?page={{ page }}" aria-controls="editable" data-dt-idx="1" tabindex="0"
                           title="第{{ page }}页">{{ page }}</a>
                    </li>
                {% else %}
                    <li class="paginate_button">
                        <a class="page" href="?page={{ page }}" aria-controls="editable" data-dt-idx="1" tabindex="0"
                           title="第{{ page }}页">{{ page }}</a>
                    </li>
                {% endifequal %}

            {% endfor %}
            {% ifequal show_end 1 %}
                <li class="paginate_button">
                    <a class="page" href="?page={{ p.num_pages }}" aria-controls="editable" data-dt-idx="1" tabindex="0"
                       title="第{{ page }}页">...{{ p.num_pages }}</a>
                </li>
            {% endifequal %}
            {% if page_obj.has_next%}
                <li class="paginate_button next " id="editable_next">
                    <a class="page" href="?page={{ page_obj.next_page_number }}" aria-controls="editable"
                       data-dt-idx="1"
                       tabindex="0">下一页</a>
                </li>
            {% else %}
                <li class="paginate_button next disabled " id="editable_next">
                    <a class="page" aria-controls="editable"
                       data-dt-idx="1"
                       tabindex="0">下一页</a>
                </li>
            {% endif %}

        </ul>
    </div>
</div>

View Code