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)