class Pagination:
def __init__(self,list_info,page_num,current_page):
'''
:param list_info: 可迭代對象 一般爲通過orm數據庫查詢的數據
:param page_num: 每頁顯示的數量
:param current_page:當前頁
'''
#python divmod() 函數把除數和餘數運算結果結合起來，返回一個包含商和餘數的元組(a // b, a % b)。
#我們這裏要計算的是總頁數 如果有餘數的話還要+1纔是總頁數。
totalPages,c = divmod(len(list_info),page_num)
if c > 0:
totalPages+=1
#保證了（當前頁） current_page在1到totalPages之間
try:
current_page = int(current_page)
except:
current_page = 1
if current_page<=0:
current_page = 1
if current_page>totalPages:
current_page = totalPages
self.list_info =list_info #可迭代對象
self.totalPages = totalPages #總頁數
self.current_page = current_page #當前頁
self.page_num =page_num #每頁顯示的數量
@property
def start(self):
return (self.current_page-1)*self.page_num
@property
def end(self):
return self.current_page*self.page_num
def current_list_info(self):
#這裏是取出當前頁所需要的數據
#例如：[1,2,3,4,5,6,7,8] 如果包含8個數據的數據集，每頁只展示2個，每次取值爲queryset[0,2] /[2,4] /[4,6]/[6,8] 注意索引取頭不取尾，也就是索引0-7的數據。
current_list = self.list_info[self.start:self.end]
return current_list #返回的也是一個可迭代的對象
def page_str(self):
list_page = []
#上一頁
if self.current_page > 1:
list_page.append(self.current_page-1)
else:
list_page.append(self.current_page)
#中間頁
if self.totalPages < 11:
s = 1
t = self.totalPages
else: # >=11
if self.current_page <= 6:
s = 1
t = 11
elif self.current_page > 6:
if self.current_page + 5 > self.totalPages:
s = self.totalPages - 11
t = self.totalPages
else:
s = self.current_page - 5
t = self.current_page + 5
for p in range(s,t+1):
list_page.append(p)
#下一頁
if self.current_page < self.totalPages:
list_page.append(self.current_page+1)
else:
list_page.append(self.current_page)
#返回的是一個列表 [10, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 12] 首尾 數據分別是上一頁和下一頁
#除去兩端中間的數據就是展示的頁
return list_page
#分頁使用
比如說在Python的tornado–web框架中使用：
1、路由
#分頁
(r"/news/(\d*)",Account.PageHandle),
2、視圖（請求處理邏輯）
from utils.page import Pagination
#因爲我們是測試可以用一個列表來代替數據庫的查詢集，效果基本上是一樣的。
queryList = []
for i in range(999):
queryList.append({"username": '我是{}'.format(i), "mobile": 13511111111+i})
class PageHandle(BaseHandle):
def get(self,current_page):
#實例化 三個參數： list_info（需要進行分頁可迭代對象）,page_num（每頁展示的數量）,current_page（當前頁）
page = Pagination(queryList,8,current_page)
#當前頁的數據
current_list = page.current_list_info()
#頁列表[10, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 12]
# str_page = page.page_str('news')
str_page = page.page_str()
#當前頁 注意：要通過實例化獲取當前頁，不能通過前端傳過來的當前頁，因爲我們在類中進行了處理，有可能實例化以後的和傳過來的不相符。
currentpage = page.current_page
print(str_page)
self.render("admin/page/index.html",list_info=current_list,current_page=currentpage,
str_page=str_page,total_page = page.totalPages)
#我們向前端模板中傳遞了四個參數：當前頁的數據，當前頁碼，頁碼展示列表和總頁數。
3、html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>分頁</title>
<link href="{{ static_url('css/page/page.css') }}" rel="stylesheet" type="text/css"/>
</head>
<body>
<div>
<table border="1">
<thead>
<tr>
<th>用戶名</th>
<th>手機號</th>
</tr>
</thead>
<tbody>
{% for info in list_info %}
<tr>
<td>{{ info['username'] }}</td>
<td>{{ info['mobile'] }}</td>
</tr>
{% end %}
</tbody>
</table>
</div>
<div class="page" id="Page">
<ul>
{#當前頁爲第一頁時，首頁和上一頁就不能被鼠標點擊了。否則就可以進行點擊#}
{% if current_page == 1%}
<li ><a class="disabled" style="pointer-events: none" href="/news/1" >首頁</a></li>
<li ><a class="disabled" style="pointer-events: none" href="/news/{{ str_page[0] }}" >上一頁</a></li>
{% else %}
<li ><a href="/news/1" >首頁</a></li>
<li ><a href="/news/{{ str_page[0] }}" >上一頁</a></li>
{% end %}
{% for page in str_page[1:-1] %} {#這裏拿到的是第2到倒數第2個的數據#}
{% if page == current_page %} {#如果遍歷時這個頁碼等於當前頁的頁碼，那就將他至於active狀態#}
<li class="active"><a href="/news/{{ page }}" >{{ page }}</a></li>
{% else %}
<li><a href="/news/{{ page }}" >{{ page }}</a></li>
{% end %}
{% end %}
{% if current_page == total_page%} {#如果當前頁就是總頁數，那麼下一頁和末頁也就不能被點擊了#}
<li><a class="disabled" style="pointer-events: none" href="/news/{{ str_page[-1] }}" >下一頁</a></li>
<li><a class="disabled" style="pointer-events: none" href="/news/{{ total_page }}" >末頁</a></li>
{% else %}
<li><a href="/news/{{ str_page[-1] }}" >下一頁</a></li>
<li><a href="/news/{{ total_page }}" >末頁</a></li>
{% end %}
<li><span> 總頁數：{{ total_page }}頁</span></li>
</ul>
</div>
</body>
{# <script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script>#}
</html>
4、css
.page{
padding-left: 330px;
padding-right: 320px;
}
.page ul{
padding:0;
min-width: 450px;
}
.page ul::after{
content: '';
display: block;
clear: both;
}
.page ul li{
float: left;
width:auto;
min-width:32px;
height: 30px;
line-height:30px;
list-style: none;
}
.page a{
color:#aaa;
font-family: "微軟雅黑";
padding:0 10px;
text-decoration: none;
display: block;
text-align: center;
border: 1px solid #ccc;
border-left: none;
}
.page ul li:first-child a{
border-left: 1px solid #ccc;
}
.page ul li a:hover{
background-color: dodgerblue;
}
.page ul li a:hover{
color: white;
}
.page .disabled a:hover{
background-color: white;
cursor:not-allowed;
color: #aaa;
}
.page .active a{
background-color: dodgerblue;
color: white;
}
table{
text-align: center;
padding-left: 500px;
padding-right: 500px;
}
效果：
