Django分頁組件

1.設計思路

根據每頁顯示數據量對數據進行切片顯示。根據/index.html?p=4用GET方法獲取頁碼html

 1 def index(request):
 2     per_page_count=10 
 3     current_page=request.GET.get('p')
 4     current_page=int(current_page)
 5     start=(current_page-1)*per_page_count
 6     end=current_page*per_page_count
 7     data=USER_LIST[start:end]
 8 
 9     if current_page<=1:
10         prev_page=1
11         next_page = current_page + 1
12     else:
13         prev_page=current_page-1
14         next_page=current_page+1
15     return render(request,"index.html",{'user_list':data,'prev_page':prev_page,'next_page':next_page})
1 <body>
2 <ul>
3     {% for row in user_list %}
4         <li>{{ row.name }}-{{ row.age }}</li>
5     {% endfor %}
6 </ul>
7 <a href="/index.html?p={{ prev_page }}">上一頁</a>
8 <a href="/index.html?p={{ next_page }}">下一頁</a>
9 </body>

2.Django原生分頁組件

Django封裝的兩個對象Paginator和page對象,經過輸入的參數對數據進行處理獲得各類屬性,且兩個對象互相包含。django

Paginator對象 參數有所有數據的數組,以及每頁顯示條目數量,函數內部封裝了對象的各項屬性
# 所有數據:USER_LIST,=》得出共有多少條數據
# per_page: 每頁顯示條目數量
# count: 數據總個數
# num_pages:總頁數
# page_range:總頁數的索引範圍,如: (1,10),(1,200)
# page: page對象(是否具備下一頁;是否有上一頁;)
Page對象 參數爲當前的頁碼
# has_next 是否有下一頁
# next_page_number 下一頁頁碼
# has_previous 是否有上一頁
# previous_page_number 上一頁頁碼
# object_list 分頁以後的數據列表,已經切片好的數據
# number 當前頁
# paginator paginator對象
from django.core.paginator import Paginator,EmptyPage,PageNotAnInteger
 1 def index1(request):
 2     current_page=request.GET.get('p')
 3     paginator=Paginator(USER_LIST, 10)
 4     try:
 5         posts=paginator.page(current_page)   
 6     except PageNotAnInteger:
 7         posts=paginator.page(1)
 8     except EmptyPage:
 9         posts=paginator.page(paginator.num_pages)
10     return render(request,"index1.html",{"posts":posts})
 1 <ul>
 2     {% for row in posts.object_list %}
 3         <li>{{ row.name }}-{{ row.age }}</li>
 4     {% endfor %}
 5 </ul>
 6 {% if posts.has_previous %}
 7 <a href="/index1.html?p={{ posts.previous_page_number }}">上一頁</a>
 8 {% else %}
 9 <a href="#">上一頁</a>
10 {% endif %}
11 {% for i in posts.paginator.pager_num_range %}
12     {% if i == posts.number  %}
13         <a style="font-size: 30px;" href="/index1.html?p={{ i }}">{{ i }}</a>
14     {% else %}
15         <a href="/index1.html?p={{ i }}">{{ i }}</a>
16     {% endif %}
17 {% endfor %}
18 {% if posts.has_next %}
19 <a href="/index1.html?p={{ posts.next_page_number }}">下一頁</a>
20 {% endif %}
21 <span>
22     {{ posts.number }}/{{ posts.paginator.num_pages }}
23 </span>

可作出相似  上一頁 下一頁 1/100  的分頁效果bootstrap

3.自定義分頁組件

經過繼承原生分頁組件自定製分頁功能數組

 1 class CustomPaginator(Paginator):
 2     def __init__(self,current_page, per_pager_num,*args,**kwargs):
 3         # 當前頁
 4         self.current_page = int(current_page)
 5         # 最多顯示的頁碼數量 11
 6         self.per_pager_num = int(per_pager_num)
 7         super(CustomPaginator,self).__init__(*args,**kwargs)
 8     def pager_num_range(self):
 9         # 當前頁
10         #self.current_page
11         # 最多顯示的頁碼數量 11
12         #self.per_pager_num
13         # 總頁數
14         # self.num_pages
15         if self.num_pages < self.per_pager_num:
16             return range(1,self.num_pages+1)
17         # 總頁數特別多 5
18         part = int(self.per_pager_num/2)
19         if self.current_page <= part:
20             return range(1,self.per_pager_num+1)
21         if (self.current_page + part) > self.num_pages:
22             return range(self.num_pages-self.per_pager_num+1,self.num_pages+1)
23         return range(self.current_page-part,self.current_page+part+1)

效果以下:
上一頁 1 2 3 4 5 6 7 8 9 10 11 下一頁 6/100app

4.bootstrap自定製樣式

 1 {#bootstrap自定製樣式#}
 2 <nav aria-label="Page navigation">
 3   <ul class="pagination">
 4     <li>
 5       {% if posts.has_previous %}
 6       <a href="/index1.html?p={{ posts.previous_page_number }}" aria-label="Previous">
 7         <span aria-hidden="true">&laquo;</span>
 8       </a>
 9        {% else %}
10         <a href="#" aria-label="Previous">
11         <span aria-hidden="true">&laquo;</span>
12       </a>
13         {% endif %}
14     </li>
15     {% for i in posts.paginator.pager_num_range %}
16     {% if i == posts.number  %}
17         <li class="active"><a  href="/index1.html?p={{ i }}">{{ i }}</a></li>
18     {% else %}
19         <li><a href="/index1.html?p={{ i }}">{{ i }}</a></li>
20     {% endif %}
21     {% endfor %}
22     <li>
23       <a href="/index1.html?p={{ posts.next_page_number }}" aria-label="Next">
24         <span aria-hidden="true">&raquo;</span>
25       </a>
26     </li>
27   </ul>
28 </nav>

 5.徹底脫離Django內置模塊的自寫分頁組件

 1 class Pagination(object):
 2     def __init__(self,totalCount,currentPage,perPageItemNum=10,maxPageNum=7):
 3         # 數據總個數
 4         self.total_count = totalCount
 5         # 當前頁
 6         try:
 7             v = int(currentPage)
 8             if v <= 0:
 9                v = 1
10             self.current_page = v
11         except Exception as e:
12             self.current_page = 1
13         # 每頁顯示的行數
14         self.per_page_item_num = perPageItemNum
15         # 最多顯示頁面
16         self.max_page_num = maxPageNum
17 
18     def start(self):
19         return (self.current_page-1) * self.per_page_item_num
20 
21     def end(self):
22         return self.current_page * self.per_page_item_num
23     @property
24     def num_pages(self):
25         """
26         總頁數
27         :return:
28         """
29         # 666
30         # 10
31         a,b = divmod(self.total_count,self.per_page_item_num)
32         if b == 0:
33             return a
34         return a+1
35 
36     def pager_num_range(self):
37         # self.num_pages()
38         # self.num_pages
39         # 當前頁
40         #self.current_page
41         # 最多顯示的頁碼數量 11
42         #self.per_pager_num
43         # 總頁數
44         # self.num_pages
45         if self.num_pages < self.max_page_num:
46             return range(1,self.num_pages+1)
47         # 總頁數特別多 5
48         part = int(self.max_page_num/2)
49         if self.current_page <= part:
50             return range(1,self.max_page_num+1)
51         if (self.current_page + part) > self.num_pages:
52             return range(self.num_pages-self.max_page_num+1,self.num_pages+1)
53         return range(self.current_page-part,self.current_page+part+1)
54 
55     def page_str(self):
56         page_list = []
57 
58         first = "<li><a href='/index2.html?p=1'>首頁</a></li>"
59         page_list.append(first)
60 
61         if self.current_page == 1:
62             prev = "<li><a href='#'>上一頁</a></li>"
63         else:
64             prev = "<li><a href='/index2.html?p=%s'>上一頁</a></li>" %(self.current_page-1,)
65         page_list.append(prev)
66         for i in self.pager_num_range():
67             if i == self.current_page:
68                 temp = "<li class='active'><a href='/index2.html?p=%s'>%s</a></li>" %(i,i)
69             else:
70                 temp = "<li><a href='/index2.html?p=%s'>%s</a></li>" % (i, i)
71             page_list.append(temp)
72 
73         if self.current_page == self.num_pages:
74             nex = "<li><a href='#'>下一頁</a></li>"
75         else:
76             nex = "<li><a href='/index2.html?p=%s'>下一頁</a></li>" % (self.current_page + 1,)
77         page_list.append(nex)
78 
79         last = "<li><a href='/index2.html?p=%s'>尾頁</a></li>" %(self.num_pages,)
80         page_list.append(last)
81 
82         return ''.join(page_list)

適用於各類框架框架

相關文章
相關標籤/搜索