能不能在上述代码中实现显示对应的页码,点击页码跳到对应的数据显示页面
时间: 2023-12-03 07:46:42 浏览: 116
当然可以实现显示对应的页码和点击页码跳转到对应的数据显示页面。具体实现方法如下:
1. 在 HTML 文件中添加一个分页列表,用于显示页码和跳转链接:
```html
<div class="pagination">
<ul>
{% for page_num in page_nums %}
<li{% if page_num == current_page %} class="active"{% endif %}>
<a href="?page={{ page_num }}">{{ page_num }}</a>
</li>
{% endfor %}
</ul>
</div>
```
其中,`page_nums` 是一个包含所有页码的列表,`current_page` 是当前页码。
2. 在 Flask 的路由函数中,根据 URL 参数获取当前页码,并根据页码获取对应的数据:
```python
@app.route('/')
def index():
# 获取当前页码
page_num = request.args.get('page', default=1, type=int)
# 计算数据的起始索引和结束索引
start_index = (page_num - 1) * PAGE_SIZE
end_index = start_index + PAGE_SIZE
# 获取对应的数据
data = get_data(start_index, end_index)
# 计算总页数
total_pages = math.ceil(TOTAL_RECORDS / PAGE_SIZE)
# 生成页码列表
page_nums = list(range(1, total_pages + 1))
# 渲染模板
return render_template('index.html', data=data, current_page=page_num, page_nums=page_nums)
```
其中,`get_data()` 是根据起始索引和结束索引获取数据的函数。
3. 在 CSS 文件中添加样式,美化分页列表:
```css
.pagination {
margin-top: 20px;
text-align: center;
}
.pagination ul {
display: inline-block;
padding: 0;
}
.pagination li {
display: inline;
margin-right: 5px;
}
.pagination li.active a {
background-color: #337ab7;
border-color: #2e6da4;
color: #fff;
}
.pagination li a {
background-color: #fff;
border: 1px solid #ddd;
color: #337ab7;
display: inline-block;
padding: 5px 10px;
text-decoration: none;
}
```
这样,就可以在网页上显示对应的页码和点击页码跳转到对应的数据显示页面了。
阅读全文