在django中使用自定義標(biāo)簽實(shí)現(xiàn)分頁(yè)功能

更新時(shí)間：2017年07月04日 08:31:35 作者：MnCu

這篇文章主要介紹了在django中使用自定義標(biāo)簽實(shí)現(xiàn)分頁(yè)功能,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

效果演示：

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

本例中總頁(yè)數(shù)為30頁(yè)，顯示頁(yè)數(shù)為12頁(yè)，當(dāng)前頁(yè)的前排頁(yè)數(shù)為4，后排頁(yè)數(shù)為5

將分頁(yè)分為三種情況：

1 當(dāng)前頁(yè)為第1頁(yè)到第7頁(yè)的時(shí)候，無(wú)省略頁(yè)，且12個(gè)位置的內(nèi)容是不變

2 當(dāng)前頁(yè)為第8頁(yè)到第25頁(yè)時(shí)，位置1與位置2內(nèi)容不變，當(dāng)前頁(yè)一直處于位置7,

3 當(dāng)前頁(yè)為第25頁(yè)到第30頁(yè)時(shí)，位置1與位置2內(nèi)容不變，位置8到位置12的內(nèi)容不變，當(dāng)前頁(yè)在位置8到位置12之中變換

自定義標(biāo)簽代碼：

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=''

 # 當(dāng)總頁(yè)數(shù)小于等于 顯示頁(yè)數(shù) 時(shí)，則將總頁(yè)數(shù)全部顯示
 if paginator.num_pages <= num_of_displaypages :
  for i in range(1,paginator.num_pages+1):
   html+= '<li ><a href="?page=%s" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >%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" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >%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" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >1</a></la>
   <li class="disabled"><a href="?page=1" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >...</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" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >%s</a></la>'%(i,i)
  return html
 # 第三種情況
 else:
  html = '''
   <li><a href="?page=1" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >1</a></la>
   <li class="disabled"><a href="?page=1" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >...</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" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >%s</a></la>'%(i,i)
  return html

來(lái)看html代碼

{% load mytags %}
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
 <!-- 新 Bootstrap 核心 CSS 文件 -->
 <link rel="stylesheet"  rel="external nofollow" >

 <!-- 可選的Bootstrap主題文件（一般不用引入） -->
 <link rel="stylesheet"  rel="external nofollow" >

 <!-- jQuery文件。務(wù)必在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 }}" rel="external nofollow" >上一頁(yè) <span class="sr-only">(current)</span></a></li>
  {% endif %}

  {% pagination current_page paginator 12 5 as page_list %} <!-- 引用自定義標(biāo)簽，并傳入?yún)?shù) -->

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

  {% if current_page.has_next %}
  <li><a href="?page={{ current_page.next_page_number }}" rel="external nofollow" >下一頁(yè) <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函數(shù)：

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

     })

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: