在django中使用自定義標籤實現分頁功能

時間 2019-11-06

標籤 django 使用自定義標籤實現分頁功能欄目 Python 简体版

原文原文鏈接

效果演示：css

github地址：https://github.com/mncu/django_projects/tree/master/django_projects/pagination_testhtml

本例中總頁數爲30頁，顯示頁數爲12頁，當前頁的前排頁數爲4，後排頁數爲5jquery

將分頁分爲三種狀況：
git

　　1 當前頁爲第1頁到第7頁的時候，無省略頁，且12個位置的內容是不變
github

　　2 當前頁爲第8頁到第25頁時，位置1與位置2內容不變，當前頁一直處於位置7,
django

　　3 當前頁爲第25頁到第30頁時，位置1與位置2內容不變，位置8到位置12的內容不變，當前頁在位置8到位置12之中變換
bootstrap

自定義標籤代碼：ide

from django import template

register = template.Library()



@register.assignment_tag
def pagination(current_page,paginator,num_of_displaypages=10,num_of_backpages=4):
    #  current_page is a django.core.paginator.Page 's instance
    #  paginator is a django.core.paginator.Paginator 's instance
    #
    num_of_frontpages = num_of_displaypages - num_of_backpages -3
    html=''

    #  當總頁數小於等於 顯示頁數 時，則將總頁數所有顯示
    if paginator.num_pages <= num_of_displaypages :
        for i in range(1,paginator.num_pages+1):
            html+= '<li ><a href="?page=%s">%s </a></li>'%(i,i)
        return html
    #  第一種狀況 
    elif current_page.number <= num_of_displaypages-num_of_backpages:
        for i in range(1,num_of_displaypages+1):
            html+= '<li ><a href="?page=%s">%s </a></li>'%(i,i)
        return html
    #  第二種狀況
    elif num_of_displaypages-num_of_frontpages <= current_page.number <= paginator.num_pages-num_of_backpages :
        html = '''
            <li><a href="?page=1">1</a></la>
            <li class="disabled"><a href="?page=1">...</a></la>

        '''
        for i in range(current_page.number-num_of_frontpages,current_page.number+num_of_backpages+1):
            html+='<li><a href="?page=%s">%s</a></la>'%(i,i)
        return html
    #  第三種狀況
    else:
        html = '''
            <li><a href="?page=1">1</a></la>
            <li class="disabled"><a href="?page=1">...</a></la>

        '''
        for i in range(paginator.num_pages-num_of_backpages-num_of_frontpages,paginator.num_pages+1):
            html+='<li><a href="?page=%s">%s</a></la>'%(i,i)
        return html

來看html代碼函數

{% load mytags %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 新 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">

    <!-- 可選的Bootstrap主題文件（通常不用引入） -->
    <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap-theme.min.css">

    <!-- jQuery文件。務必在bootstrap.min.js 以前引入 -->
    <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>

    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</head>
<body>
{{ current_page.object_list }}

 <nav>

      <ul class="pagination">
      {% if current_page.has_previous %}
        <li ><a href="?page={{ current_page.previous_page_number }}">上一頁 <span class="sr-only">(current)</span></a></li>
      {% endif %}

      {% pagination current_page paginator 12 5 as page_list %} <!-- 引用自定義標籤，並傳入參數 -->

      {{ page_list|safe }} <!-- 顯示 -->

      {% if current_page.has_next %}
        <li><a href="?page={{ current_page.next_page_number }}">下一頁 <span class="sr-only">(current)</span></a></li>
      {% endif %}
      </ul>

 </nav>

<script>
    $(document).ready(function(){
        $('.pagination li a').each(function(){

           if ( $(this).html() == {{ current_page.number }} ){
               $(this).parent().addClass('active')
           }
        });

    })


</script>
</body>
</html>

看看view函數：this

from django.shortcuts import render
from django.core.paginator import Paginator, EmptyPage, PageNotAnInteger

# Create your views here.


def index(request):

    obj_list = ['page01','page02','page03','page04','page05','page06','page07','page08','page09','page10',
                'page11','page12','page13','page14','page15','page16','page17','page18','page19','page20',
                'page21','page22','page23','page24','page25','page26','page27','page28','page29','page30',]
    #create a paginator instance
    paginator = Paginator(obj_list,1)

    #Get the page_number of current page
    current_page_num = request.GET.get('page')

    try:
        current_page = paginator.page(current_page_num)
    except PageNotAnInteger:
        # If page is not an integer, deliver first page.
        current_page = paginator.page(1)
    except EmptyPage:
        # If page is out of range (e.g. 9999), deliver last page of results.
        current_page = paginator.page(paginator.num_pages)
    return render(request,'index.html',
                  {'current_page': current_page,
                   'paginator': paginator

                  })