一.功能逻辑
页面样式:
功能:
- 每页显示5条数据,后端有一个列表LIST_INFO保存着每一条数据
- 点击首页,跳转到表格第一页,同时页码1高亮
- 点击上一页,跳转到表格当前页的上一页,同时高亮页码切换到上一页,当当前页为第1页时,点击上一页后还显示第一页
- 点击页码数,跳转到相应页,并且保持总是显示9个页码数,当前页码为1-5时,显示前面页码1-9;当前页码为最后五页时,显示页码为最后9页,当前页码为其他时,显示当前页码和前后各4个页码。
- 点击尾页,跳转到表格最后一页,同时最后一页页码高亮,当当前页为最后一页时,点击尾页无效
- 在右侧输入框中,输入页码数,点击go,则跳转到相应页。
二.目录结构:
三.HTML-home.html
代码块中的{% raw str_page %}为模板语言,根据后端传入【页码相关的html代码块】
index.html放在views文件夹下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.page_num a{
display:inline-block;
padding:5px;
margin:3px;
background-color:gray;
}
.page_num a.active{
background-color:pink;
color:black;
}
</style>
</head>
<body>
<h1>显示数据</h1>
<table border="1px">