Flask 框架实现自定义分页

手撸的表格分页: Flask框架下的分页,我研究了很久,自带的分页方法不稳定,还不如自己手撸的好使.

 
<!--name:ndex.html-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
</head>
<body>
<table class="table table-sm table-hover">
    <thead>
        <tr class="table-success">
            <th> 序号</th> <th> 用户ID</th> <th> 用户名称</th> <th> 用户邮箱</th>
        </tr>
    </thead>
    <tbody>
        {% for article in articles %}
            <tr class="table-primary">
                <td>{{ loop.index }}</td>
                <td>{{ article.id }}</td>
                <td>{{ article.name }}</td>
                <td>{{ article.email }}</td>
            </tr>
        {% endfor %}
    </tbody>
</table>
<nav class="d-flex justify-content-center" aria-label="Page navigation example">
  <ul class="pagination">
    <li class="page-item"><a class="page-link" href="./page=1">首页</a></li>
      {% if pagination.has_prev %}
           <li class="page-item"><a class="page-link" href="./page={{ prve_num }}">上一页</a></li>
      {% endif %}
 
<!--获取当前列表,并全部填充到这里-->
      {% for  item in PageList %}
          {% if item == 0 %} <!--判断如果为0，则说明是选中页面,直接标号为当前页码-->
                <li class="page-item active"><a class="page-link" href="./page={{ pagination.page }}">{{ pagination.page }}</a></li>
          {% else %} <!--否则的话,就直接接收参数填充-->
                <li class="page-item"><a class="page-link" href="./page={{ item }}">{{ item }}</a></li>
          {% endif %}
      {% endfor %}
 
      {% if next_end %}
          <li class="page-item"><a class="page-link" href="./page={{ next_num }}">下一页</a></li>
      {% endif %}
    <li class="page-item"><a class="page-link" href="./page={{ PageCount }}">尾页</a></li>
  </ul>
</nav>
  <div style="text-align: center;" class="alert alert-dark">
   统计: {{ pagination.page }}/{{ PageCount }} 共查询到:{{ pagination.total }} 条数据</div>
</body>
</html>

app.py

 
# name:app.py
from flask import Flask,render_template,request
from flask_sqlalchemy import SQLAlchemy
from flask_paginate import Pagination,get_page_parameter
import sqlalchemy,sqlite3,math
 
app = Flask(__name__)
app.config['SQLALCHEMY_DATABASE_URI'] = 'sqlite:///d:/user.db'
# 设置每次请求结束后会自动提交数据库的改动
app.config['SQLALCHEMY_COMMIT_ON_TEARDOWN'] = True
app.config['SQLALCHEMY_TRACK_MODIFICATIONS'] = True
# 查询时显示原始SQL语句
app.config['SQLALCHEMY_ECHO'] = False
db = SQLAlchemy(app)
 
class User(db.Model):
    __tablename__="user"          # 定义表名称
    id = db.Column(db.Integer,primary_key=True)  # 映射数据库字段
    name = db.Column(db.String(32))
    email = db.Column(db.String(32))
    def __init__(self,name,email):
        self.name=name
        self.email=email
    def __repr_(self):
        return 'User %s'%self.name
 
@app.route("/")
def index():
    return """<script>window.location.href="./page=1"</script>"""
 
@app.route("/page=<int:id>")
def GetPages(id):
    PER_PAGE = 3   # 默认每页显示3个元素
    total = db.session.query(User).count()
    print("总记录 {} 条".format(total))
    page = request.args.get(get_page_parameter(),type=int,default=int(id))
    print("当前页码ID为 {}".format(page))
    start = (page-1)*PER_PAGE   # 分页起始位置
    end = start+PER_PAGE        # 分页结束位置
    print("起始位置 {} 结束位置 {}".format(start,end))
 
    prev_num = int(page)-1
    next_num = int(page)+1
    print("上一页页码 {} 下一页页码 {}".format(prev_num,next_num))
 
    page_count = math.ceil(total/PER_PAGE)              # 计算出需要切割的页数
    print("切割页数 {}".format(page_count))
 
    pagination = Pagination(page=page,total=total)
    articles = db.session.query(User).slice(start,end)  # 执行数据库切片
 
    if page>=math.ceil(total/PER_PAGE):   # 判断,如果next_end大于总数说明到最后了
        next_end=0                        # 那么我们就将next_end设置为0,前端就不执行显示了.
    else:
        next_end=1
    # ---------------------------------------------
    # 功能拓展,用于生成当前页码.
    page_list = []
    for i in range(1, page_count + 1):
        if i == page:
            page_list.append(0)    # 赋值为0说明是当前页面
        else:                      # 否则就直接赋值元素
            page_list.append(i)
    print("生成的当前页码: {}".format(page_list))
 
    context = {
        'pagination': pagination,
        'articles': articles,
        'prve_num': prev_num,
        'next_num': next_num,
        'PageCount': page_count,
        'PageList': page_list,
        'next_end': next_end
    }
    return render_template('index.html',**context)
 
if __name__ == '__main__':
    app.run()

一个优秀的表格分页: 在网上摘抄的优秀的分页类,我对其进行稍微美化,并加上数据库过程,很nice.

 
<!-- name: page.html-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
</head>
<body>
<table class="table table-sm table-hover">
    <thead>
        <tr class="table-success">
            <th> 用户ID</th>
            <th> 用户名称</th>
            <th> 用户邮箱</th>
        </tr>
    </thead>
    <tbody>
        {% for article in articles %}
            <tr class="table-primary">
                <td>{{ article.id }}</td>
                <td>{{ article.name }}</td>
                <td>{{ article.email }}</td>
            </tr>
        {% endfor %}
    </tbody>
</table>
    <nav class="d-flex justify-content-center" aria-label="Page navigation example">
         <ul class="pagination">
            {{ html|safe }}
        </ul>
    </nav>
</body>
</html>

pager.py

 
# name:pager.py
 
import copy
from urllib.parse import urlencode,quote,unquote
 
class Pagination(object):
    def __init__(self,current_page,total_count,base_url,params,per_page_count=10,max_pager_count=11):
        try:
            current_page = int(current_page)
        except Exception as e:
            current_page = 1
        if current_page <=0:
            current_page = 1
        self.current_page = current_page
        # 数据总条数
        self.total_count = total_count
        # 每页显示10条数据
        self.per_page_count = per_page_count
        # 页面上应该显示的最大页码
        max_page_num, div = divmod(total_count, per_page_count)
        if div:
            max_page_num += 1
        self.max_page_num = max_page_num
        # 页面上默认显示11个页码（当前页在中间）
        self.max_pager_count = max_pager_count
        self.half_max_pager_count = int((max_pager_count - 1) / 2)
        # URL前缀
        self.base_url = base_url
        # request.GET
        params = copy.deepcopy(params)
        # params._mutable = True
        get_dict = params.to_dict()
        # 包含当前列表页面所有的搜/索条件
        self.params = get_dict
    @property
    def start(self):
        return (self.current_page - 1) * self.per_page_count
    @property
    def end(self):
        return self.current_page * self.per_page_count
    def page_html(self):
        # 如果总页数 <= 11
        if self.max_page_num <= self.max_pager_count:
            pager_start = 1
            pager_end = self.max_page_num
        # 如果总页数 > 11
        else:
            # 如果当前页 <= 5
            if self.current_page <= self.half_max_pager_count:
                pager_start = 1
                pager_end = self.max_pager_count
            else:
                # 当前页 + 5 > 总页码
                if (self.current_page + self.half_max_pager_count) > self.max_page_num:
                    pager_end = self.max_page_num
                    pager_start = self.max_page_num - self.max_pager_count + 1   #倒这数11个
                else:
                    pager_start = self.current_page - self.half_max_pager_count
                    pager_end = self.current_page + self.half_max_pager_count
        page_html_list = []
        # 首页
        self.params['page'] = 1
        first_page = '<li class="page-item"><a class="page-link" href="%s?%s">首页</a></li>' % (self.base_url,urlencode(self.params),)
        page_html_list.append(first_page)
        # 上一页
        self.params["page"] = self.current_page - 1
        if self.params["page"] < 1:
            pervious_page = '<li class="page-item" class="disabled"><a class="page-link" \
            href="%s?%s" aria-label="Previous">上一页</span></a></li>' % (self.base_url, urlencode(self.params))
        else:
            pervious_page = '<li class="page-item"><a class="page-link" href = "%s?%s" \
            aria-label = "Previous" >上一页</span></a></li>' % ( self.base_url, urlencode(self.params))
        page_html_list.append(pervious_page)
        # 中间页码
        for i in range(pager_start, pager_end + 1):
            self.params['page'] = i
            if i == self.current_page:
                temp = '<li class="page-item active" class="active"><a class="page-link" \
                href="%s?%s">%s</a></li>' % (self.base_url,urlencode(self.params), i,)
            else:
                temp = '<li  class="page-item"><a class="page-link" \
                href="%s?%s">%s</a></li>' % (self.base_url,urlencode(self.params), i,)
            page_html_list.append(temp)
        # 下一页
        self.params["page"] = self.current_page + 1
        if self.params["page"] > self.max_page_num:
            self.params["page"] = self.current_page
            next_page = '<li class="page-item" class="disabled"><a class="page-link" \
            href = "%s?%s" aria-label = "Next">下一页</span></a></li >' % (self.base_url, urlencode(self.params))
        else:
            next_page = '<li class="page-item"><a class="page-link" href = "%s?%s" \
            aria-label = "Next">下一页</span></a></li>' % (self.base_url, urlencode(self.params))
        page_html_list.append(next_page)
        # 尾页
        self.params['page'] = self.max_page_num
        last_page = '<li class="page-item"><a class="page-link" href="%s?%s">尾页</a></li>' % (self.base_url, urlencode(self.params),)
        page_html_list.append(last_page)
        return ''.join(page_html_list)

app.py

 
# name:app.py
 
from flask import Flask,render_template,request,redirect
from pager import Pagination          #带入分页类
from urllib.parse import urlencode
from flask_sqlalchemy import SQLAlchemy
import sqlalchemy,sqlite3,math
 
app = Flask(__name__)
app.config['SQLALCHEMY_DATABASE_URI'] = 'sqlite:///d:/user.db'
# 设置每次请求结束后会自动提交数据库的改动
app.config['SQLALCHEMY_COMMIT_ON_TEARDOWN'] = True
app.config['SQLALCHEMY_TRACK_MODIFICATIONS'] = True
# 查询时显示原始SQL语句
app.config['SQLALCHEMY_ECHO'] = False
db = SQLAlchemy(app)
 
class User(db.Model):
    __tablename__="user"          # 定义表名称
    id = db.Column(db.Integer,primary_key=True)  # 映射数据库字段
    name = db.Column(db.String(32))
    email = db.Column(db.String(32))
    def __init__(self,name,email):
        self.name=name
        self.email=email
    def __repr_(self):
        return 'User %s'%self.name
 
@app.route("/")
def hello():
# current_page—: 表示当前页
# total_count—: 数据总条数
# base_url: 分页URL前缀，通过request.path方法获取
# params: 请求传入的数据params可以通过request.args动态获取
# per_page_count :指定每页显示数
# max_pager_count: 指定页面最大显示页码
    total = db.session.query(User).count()
    Page = Pagination(request.args.get("page", 1), total, request.path, request.args, per_page_count=5)
    index_list = db.session.query(User)[Page.start:Page.end]
    html = Page.page_html()
    return render_template("page.html",articles=index_list,html=html)
 
if __name__ == '__main__':
    app.run(debug=True)

	<!--name:ndex.html-->
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>Title</title>
	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
	</head>
	<body>
	<table class="table table-sm table-hover">
	<thead>
	<tr class="table-success">
	<th> 序号</th> <th> 用户ID</th> <th> 用户名称</th> <th> 用户邮箱</th>
	</tr>
	</thead>
	<tbody>
	{% for article in articles %}
	<tr class="table-primary">
	<td>{{ loop.index }}</td>
	<td>{{ article.id }}</td>
	<td>{{ article.name }}</td>
	<td>{{ article.email }}</td>
	</tr>
	{% endfor %}
	</tbody>
	</table>
	<nav class="d-flex justify-content-center" aria-label="Page navigation example">
	<ul class="pagination">
	<li class="page-item"><a class="page-link" href="./page=1">首页</a></li>
	{% if pagination.has_prev %}
	<li class="page-item"><a class="page-link" href="./page={{ prve_num }}">上一页</a></li>
	{% endif %}

	<!--获取当前列表,并全部填充到这里-->
	{% for item in PageList %}
	{% if item == 0 %} <!--判断如果为0，则说明是选中页面,直接标号为当前页码-->
	<li class="page-item active"><a class="page-link" href="./page={{ pagination.page }}">{{ pagination.page }}</a></li>
	{% else %} <!--否则的话,就直接接收参数填充-->
	<li class="page-item"><a class="page-link" href="./page={{ item }}">{{ item }}</a></li>
	{% endif %}
	{% endfor %}

	{% if next_end %}
	<li class="page-item"><a class="page-link" href="./page={{ next_num }}">下一页</a></li>
	{% endif %}
	<li class="page-item"><a class="page-link" href="./page={{ PageCount }}">尾页</a></li>
	</ul>
	</nav>
	<div style="text-align: center;" class="alert alert-dark">
	统计: {{ pagination.page }}/{{ PageCount }} 共查询到:{{ pagination.total }} 条数据</div>
	</body>
	</html>

	# name:app.py
	from flask import Flask,render_template,request
	from flask_sqlalchemy import SQLAlchemy
	from flask_paginate import Pagination,get_page_parameter
	import sqlalchemy,sqlite3,math

	app = Flask(__name__)
	app.config['SQLALCHEMY_DATABASE_URI'] = 'sqlite:///d:/user.db'
	# 设置每次请求结束后会自动提交数据库的改动
	app.config['SQLALCHEMY_COMMIT_ON_TEARDOWN'] = True
	app.config['SQLALCHEMY_TRACK_MODIFICATIONS'] = True
	# 查询时显示原始SQL语句
	app.config['SQLALCHEMY_ECHO'] = False
	db = SQLAlchemy(app)

	class User(db.Model):
	__tablename__="user" # 定义表名称
	id = db.Column(db.Integer,primary_key=True) # 映射数据库字段
	name = db.Column(db.String(32))
	email = db.Column(db.String(32))
	def __init__(self,name,email):
	self.name=name
	self.email=email
	def __repr_(self):
	return 'User %s'%self.name

	@app.route("/")
	def index():
	return """<script>window.location.href="./page=1"</script>"""

	@app.route("/page=<int:id>")
	def GetPages(id):
	PER_PAGE = 3 # 默认每页显示3个元素
	total = db.session.query(User).count()
	print("总记录 {} 条".format(total))
	page = request.args.get(get_page_parameter(),type=int,default=int(id))
	print("当前页码ID为 {}".format(page))
	start = (page-1)*PER_PAGE # 分页起始位置
	end = start+PER_PAGE # 分页结束位置
	print("起始位置 {} 结束位置 {}".format(start,end))

	prev_num = int(page)-1
	next_num = int(page)+1
	print("上一页页码 {} 下一页页码 {}".format(prev_num,next_num))

	page_count = math.ceil(total/PER_PAGE) # 计算出需要切割的页数
	print("切割页数 {}".format(page_count))

	pagination = Pagination(page=page,total=total)
	articles = db.session.query(User).slice(start,end) # 执行数据库切片

	if page>=math.ceil(total/PER_PAGE): # 判断,如果next_end大于总数说明到最后了
	next_end=0 # 那么我们就将next_end设置为0,前端就不执行显示了.
	else:
	next_end=1
	# ---------------------------------------------
	# 功能拓展,用于生成当前页码.
	page_list = []
	for i in range(1, page_count + 1):
	if i == page:
	page_list.append(0) # 赋值为0说明是当前页面
	else: # 否则就直接赋值元素
	page_list.append(i)
	print("生成的当前页码: {}".format(page_list))

	context = {
	'pagination': pagination,
	'articles': articles,
	'prve_num': prev_num,
	'next_num': next_num,
	'PageCount': page_count,
	'PageList': page_list,
	'next_end': next_end
	}
	return render_template('index.html',**context)

	if __name__ == '__main__':
	app.run()

	<!-- name: page.html-->
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>Title</title>
	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
	</head>
	<body>
	<table class="table table-sm table-hover">
	<thead>
	<tr class="table-success">
	<th> 用户ID</th>
	<th> 用户名称</th>
	<th> 用户邮箱</th>
	</tr>
	</thead>
	<tbody>
	{% for article in articles %}
	<tr class="table-primary">
	<td>{{ article.id }}</td>
	<td>{{ article.name }}</td>
	<td>{{ article.email }}</td>
	</tr>
	{% endfor %}
	</tbody>
	</table>
	<nav class="d-flex justify-content-center" aria-label="Page navigation example">
	<ul class="pagination">
	{{ html\|safe }}
	</ul>
	</nav>
	</body>
	</html>

	# name:pager.py

	import copy
	from urllib.parse import urlencode,quote,unquote

	class Pagination(object):
	def __init__(self,current_page,total_count,base_url,params,per_page_count=10,max_pager_count=11):
	try:
	current_page = int(current_page)
	except Exception as e:
	current_page = 1
	if current_page <=0:
	current_page = 1
	self.current_page = current_page
	# 数据总条数
	self.total_count = total_count
	# 每页显示10条数据
	self.per_page_count = per_page_count
	# 页面上应该显示的最大页码
	max_page_num, div = divmod(total_count, per_page_count)
	if div:
	max_page_num += 1
	self.max_page_num = max_page_num
	# 页面上默认显示11个页码（当前页在中间）
	self.max_pager_count = max_pager_count
	self.half_max_pager_count = int((max_pager_count - 1) / 2)
	# URL前缀
	self.base_url = base_url
	# request.GET
	params = copy.deepcopy(params)
	# params._mutable = True
	get_dict = params.to_dict()
	# 包含当前列表页面所有的搜/索条件
	self.params = get_dict
	@property
	def start(self):
	return (self.current_page - 1) * self.per_page_count
	@property
	def end(self):
	return self.current_page * self.per_page_count
	def page_html(self):
	# 如果总页数 <= 11
	if self.max_page_num <= self.max_pager_count:
	pager_start = 1
	pager_end = self.max_page_num
	# 如果总页数 > 11
	else:
	# 如果当前页 <= 5
	if self.current_page <= self.half_max_pager_count:
	pager_start = 1
	pager_end = self.max_pager_count
	else:
	# 当前页 + 5 > 总页码
	if (self.current_page + self.half_max_pager_count) > self.max_page_num:
	pager_end = self.max_page_num
	pager_start = self.max_page_num - self.max_pager_count + 1 #倒这数11个
	else:
	pager_start = self.current_page - self.half_max_pager_count
	pager_end = self.current_page + self.half_max_pager_count
	page_html_list = []
	# 首页
	self.params['page'] = 1
	first_page = '<li class="page-item"><a class="page-link" href="%s?%s">首页</a></li>' % (self.base_url,urlencode(self.params),)
	page_html_list.append(first_page)
	# 上一页
	self.params["page"] = self.current_page - 1
	if self.params["page"] < 1:
	pervious_page = '<li class="page-item" class="disabled"><a class="page-link" \
	href="%s?%s" aria-label="Previous">上一页</span></a></li>' % (self.base_url, urlencode(self.params))
	else:
	pervious_page = '<li class="page-item"><a class="page-link" href = "%s?%s" \
	aria-label = "Previous" >上一页</span></a></li>' % ( self.base_url, urlencode(self.params))
	page_html_list.append(pervious_page)
	# 中间页码
	for i in range(pager_start, pager_end + 1):
	self.params['page'] = i
	if i == self.current_page:
	temp = '<li class="page-item active" class="active"><a class="page-link" \
	href="%s?%s">%s</a></li>' % (self.base_url,urlencode(self.params), i,)
	else:
	temp = '<li class="page-item"><a class="page-link" \
	href="%s?%s">%s</a></li>' % (self.base_url,urlencode(self.params), i,)
	page_html_list.append(temp)
	# 下一页
	self.params["page"] = self.current_page + 1
	if self.params["page"] > self.max_page_num:
	self.params["page"] = self.current_page
	next_page = '<li class="page-item" class="disabled"><a class="page-link" \
	href = "%s?%s" aria-label = "Next">下一页</span></a></li >' % (self.base_url, urlencode(self.params))
	else:
	next_page = '<li class="page-item"><a class="page-link" href = "%s?%s" \
	aria-label = "Next">下一页</span></a></li>' % (self.base_url, urlencode(self.params))
	page_html_list.append(next_page)
	# 尾页
	self.params['page'] = self.max_page_num
	last_page = '<li class="page-item"><a class="page-link" href="%s?%s">尾页</a></li>' % (self.base_url, urlencode(self.params),)
	page_html_list.append(last_page)
	return ''.join(page_html_list)

	# name:app.py

	from flask import Flask,render_template,request,redirect
	from pager import Pagination #带入分页类
	from urllib.parse import urlencode
	from flask_sqlalchemy import SQLAlchemy
	import sqlalchemy,sqlite3,math

	app = Flask(__name__)
	app.config['SQLALCHEMY_DATABASE_URI'] = 'sqlite:///d:/user.db'
	# 设置每次请求结束后会自动提交数据库的改动
	app.config['SQLALCHEMY_COMMIT_ON_TEARDOWN'] = True
	app.config['SQLALCHEMY_TRACK_MODIFICATIONS'] = True
	# 查询时显示原始SQL语句
	app.config['SQLALCHEMY_ECHO'] = False
	db = SQLAlchemy(app)

	class User(db.Model):
	__tablename__="user" # 定义表名称
	id = db.Column(db.Integer,primary_key=True) # 映射数据库字段
	name = db.Column(db.String(32))
	email = db.Column(db.String(32))
	def __init__(self,name,email):
	self.name=name
	self.email=email
	def __repr_(self):
	return 'User %s'%self.name

	@app.route("/")
	def hello():
	# current_page—: 表示当前页
	# total_count—: 数据总条数
	# base_url: 分页URL前缀，通过request.path方法获取
	# params: 请求传入的数据params可以通过request.args动态获取
	# per_page_count :指定每页显示数
	# max_pager_count: 指定页面最大显示页码
	total = db.session.query(User).count()
	Page = Pagination(request.args.get("page", 1), total, request.path, request.args, per_page_count=5)
	index_list = db.session.query(User)[Page.start:Page.end]
	html = Page.page_html()
	return render_template("page.html",articles=index_list,html=html)

	if __name__ == '__main__':
	app.run(debug=True)