django2.0记录 分页封装

背景介绍

python3环境,前后端不分离,前端使用bootstrap2框架,后端使用django2.0框架,包含分页前端代码以及后端实现,只是个人日常记录,仅供参考

前端代码

<div class="blog_list_footer">
        <span class="blog_footer_tip">
            共{{ pages.count }}条记录。
            当前第{{ contacts.number }}页，
            共{{ pages.num_pages }}页
        </span>
            <div class="pagination pagination-centered">
                <ul>
                    <li>
                    {!--用户包含搜索状态分页的实现--}
                        <a href="?page={% if contacts.has_previous %}{{ contacts.previous_page_number }}{% if request.GET.status %}&status={{ request.GET.status }}{% endif %}{% if request.GET.search %}&search={{ request.GET.search }}{% endif %}{% if request.GET.start_time %}&start_time={{ request.GET.start_time }}{% endif %}{% if request.GET.end_time %}&end_time={{ request.GET.end_time }}{% endif %}
                        {% else %}
                                    {{ contacts.number }}{% if request.GET.status %}&status={{ request.GET.status }}{% endif %}{% if request.GET.search %}&search={{ request.GET.search }}{% endif %}{% if request.GET.start_time %}&start_time={{ request.GET.start_time }}{% endif %}{% if request.GET.end_time %}&end_time={{ request.GET.end_time }}{% endif %}
                        {% endif %}
                    " aria-label="Previous">
                            <span aria-hidden="true">&laquo;</span>
                        </a>
                    </li>
                    {% for page in pages.page_range_ex %}
                        {% if page == '...' %}
                            <li><span>...</span></li>
                        {% else %}
                            <li><a href="?page={{ page }}{% if request.GET.status %}&status={{ request.GET.status }}{% endif %}{% if request.GET.search %}&search={{ request.GET.search }}{% endif %}{% if request.GET.start_time %}&start_time={{ request.GET.start_time }}{% endif %}{% if request.GET.end_time %}&end_time={{ request.GET.end_time }}{% endif %}">{{ page }}</a>
                            </li>
                        {% endif %}
                    {% endfor %}
                    <li>
                        <a href="?page={% if contacts.has_next %}{{ contacts.next_page_number }}{% if request.GET.status %}&status={{ request.GET.status }}{% endif %}{% if request.GET.search %}&search={{ request.GET.search }}{% endif %}{% if request.GET.start_time %}&start_time={{ request.GET.start_time }}{% endif %}{% if request.GET.end_time %}&end_time={{ request.GET.end_time }}{% endif %}
                        {% else %}
                                    {{ contacts.number }}{% if request.GET.status %}&status={{ request.GET.status }}{% endif %}{% if request.GET.search %}&search={{ request.GET.search }}{% endif %}{% if request.GET.start_time %}&start_time={{ request.GET.start_time }}{% endif %}{% if request.GET.end_time %}&end_time={{ request.GET.end_time }}{% endif %}
                        {% endif %}
                    " aria-label="Next">
                            <span aria-hidden="true">&raquo;</span>
                        </a>
                    </li>
                </ul>
                {# 页码跳转的html代码 #}
                <ul class="pagination">
                    <li id="page_goto">
                    <span>
                        <input type="text" value="{{ paginator.page_goto }}"/>
                    </span>
                    </li>
                    <li><a href="javascript:void(0);" onClick="page_goto();">Go</a></li>
                </ul>
            </div>
        </div>

<style type="text/css">
            {#页码跳转的显示样式#}
            #page_goto span {
                padding: 0 4px;
                height: 28px;

            }

            #page_goto input {
                border: none;
                padding: 0;
                width: 2em;
                text-align: center;
            }

            .pagination ul > .active > a {
                background-color: #337ab7;
            }
        </style>

<script type="text/javascript">
            {#设置凸显当前页码#}
            $(".pagination li a").each(function () {
                if ($(this).text() == "{{contacts.number}}") {
                    $(this).parent().addClass("active");
                }
            });
            {#页码跳转处理#}
            function page_goto() {
                var page = $("#page_goto input")[0].value;
                window.location.href = '?page=' + page;  //重定向
                return false;
            }
        </script>

后端实现代码

# 生成分页信息,以及返回分页数据方法,视图函数直接调用传入request对象,以及数据list即可
def getPage(request, objectList):
    """get the paginator"""
    currentPage = request.GET.get('page', 1)
    paginator = Paginator(objectList, settings.EACHPAGE_NUMBER)
    objectlist = paginator.page(currentPage)

    page_range = []
    current = objectlist.number  # 当前页码
    page_all = paginator.num_pages  # 总页数
    mid_pages = 3  # 中间段显示的页码数
    page_goto = 1  # 默认跳转的页码

    # 获取优化显示的页码列表
    if page_all <= 2 + mid_pages:
        # 页码数少于6页就无需分析哪些地方需要隐藏
        page_range = paginator.page_range
    else:
        # 添加应该显示的页码
        page_range += [1, page_all]
        page_range += [current - 1, current, current + 1]

        # 若当前页是头尾，范围拓展多1页
        if current == 1 or current == page_all:
            page_range += [current + 2, current - 2]

        # 去掉超出范围的页码
        page_range = filter(lambda x: x >= 1 and x <= page_all, page_range)

        # 排序去重
        page_range = sorted(list(set(page_range)))

        # 查漏补缺
        # 从第2个开始遍历，查看页码间隔，若间隔为0则是连续的
        # 若间隔为1则补上页码；间隔超过1，则补上省略号
        t = 1
        for i in range(len(page_range) - 1):
            step = page_range[t] - page_range[t - 1]
            if step >= 2:
                if step == 2:
                    page_range.insert(t, page_range[t] - 1)
                else:
                    page_goto = page_range[t - 1] + 1
                    page_range.insert(t, '...')
                t += 1
            t += 1

    # 优化结果之后的页码列表
    paginator.page_range_ex = page_range
    # 默认跳转页的值
    paginator.page_goto = page_goto

    return paginator, objectlist

后端视图调用

class PlayerManageView(View):

    def get(self, request):
        # 条件过滤
        status = request.GET.get('status')
        start_time = request.GET.get('start_time')
        end_time = request.GET.get('end_time')
        search = request.GET.get('search')
        player_list= Player.objects.all()
        pages, player_list= getPage(request, player_list)
		
		context = {
            'player_list': player_list,
            'pages': pages
        }

        return render(request, 'user_manage/userList.html', context)