問題

1、當返回數(shù)據(jù)較多，如設(shè)置每頁展示10條，數(shù)據(jù)接近200條，返回頁碼范圍1~20，前端每個頁碼都顯示的話，就會出現(xiàn)頁碼超出當前頁面，被遮擋的頁碼無法操作和顯示不美觀；
2、列表的所在頁碼，總分頁數(shù)，跳轉(zhuǎn)不在動態(tài)頁面的頁數(shù)

解決

在使用paginator轉(zhuǎn)化為Page對象后，獲取到num_pages：總的頁碼數(shù)，配合當前頁碼，進行判斷
顯示列表的所在頁碼，總分頁數(shù)，實現(xiàn)跳轉(zhuǎn)不在動態(tài)頁面的頁數(shù)

效果

實現(xiàn)

views.py

def api_list(request):
    p_index = int(request.GET.get('page', 1))  # 當前頁碼
    api_list = API_Manage().get_all_api_list()  # 查詢的數(shù)據(jù)

    page_size = 10  # 每頁大小

    # 設(shè)置每頁10條數(shù)據(jù)，paginator
    paginator = Paginator(api_list, per_page=page_size)
    # 當前頁碼
    current_page = paginator.get_page(p_index).number
    # 頁面數(shù)據(jù)
    page = paginator.page(p_index)
    # 頁碼超過12頁,進行動態(tài)返回頁碼范圍
    if paginator.num_pages > 12:
        if current_page - 5 < 1:  # 當前頁小于5
            page_range = range(1, 11)
        elif current_page + 5 > paginator.num_pages:  # 當前頁+5大于總頁碼
            page_range = range(current_page - 5, paginator.num_pages + 1)
        else:
            page_range = range(current_page - 5, current_page + 5)
    else:
        page_range = paginator.page_range
    print(page_range)
    data = {'page': page, 'paginator': paginator, 'current_page': current_page, 'page_range': page_range}
    return render(request, 'api_list.html', data)

動態(tài)返回頁碼邏輯：

如果當前頁碼-5，小于1，返回的頁碼范圍: （1,11）

如果當前頁碼-5>1，且當前頁碼+5小于總頁碼，范圍（當前頁碼-5，當前頁碼+5）

如果當前頁碼-5>1，且當前頁碼+5大于總頁碼，范圍（當前頁碼-5，總的頁碼數(shù)+1）

html

<div class="container" id="nav" style="text-align:center;">
    <ul class="pagination" id="page" >
        <li>共{{ paginator.num_pages }}頁/第{{page.number}}頁 跳轉(zhuǎn)到第
            <input type="number" style="width: 50px" min="1" max = {{paginator.num_pages}} value="{{ current_page }}">頁
<button>跳轉(zhuǎn)</button></li>

        {% if page.has_previous %}
            <li class="previous"><a href="{{ request.path }}?page={{ page.previous_page_number }}">上一頁</a></li>
        {% else %}
            <li class="previous disabled"><a href="#">上一頁</a></li>
        {% endif %}
        {% for num in page_range %}
            {% if num == current_page %}
            <li class="active" style="backgroud:#C6E2FF"><a href="{{ request.path }}?page={{ num }}">{{ num }}</a></li>
            {% else %}
            <li class="item"><a href="{{ request.path}}?page={{ num }}">{{ num }}</a></li>
            {% endif %}
        {% endfor %}
        {% if page.has_next %}
            <li class="next"><a href="{{ request.path}}?page={{ page.next_page_number }}">下一頁</a></li>
        {% endif %}
    </ul>
</div>

<script type="text/javascript">
    $('button').click(function () {
        var num = $('input').val();
        console.log(num);
        if(num<=0 || num>{{ paginator.num_pages }}){
            $('input').val('');
        }else{
            window.location.href='{{ request.path}}?page='+num;
        }
    })
</script>

• 頁碼居中：

div 標簽設(shè)置：style=“text-align:center;”文章來源地址http://www.zghlxwxcb.cn/news/detail-522175.html

• 頁面跳轉(zhuǎn)
  設(shè)置默認值、最小值、最大值：min=“1” max = {{paginator.num_pages}} value="{{ current_page }}

<li>共{{ paginator.num_pages }}頁/第{{page.number}}頁 跳轉(zhuǎn)到第
            <input type="number" style="width: 50px" min="1" max = {{paginator.num_pages}} value="{{ current_page }}">頁
<button>跳轉(zhuǎn)</button></li>

• 動態(tài)頁碼

		{% for num in page_range %}
            {% if num == current_page %}
            <li class="active" style="backgroud:#C6E2FF"><a href="{{ request.path }}?page={{ num }}">{{ num }}</a></li>
            {% else %}
            <li class="item"><a href="{{ request.path}}?page={{ num }}">{{ num }}</a></li>
            {% endif %}
        {% endfor %}

到了這里，關(guān)于【Django】列表數(shù)據(jù)Paginatior分頁，動態(tài)返回頁碼，顯示當前頁、總頁數(shù)、跳轉(zhuǎn)頁的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！