<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="/static/jquery-3.3.1/jquery-3.3.1.min.js"></script>
<link rel="stylesheet" href="/static/bootstrap/css/bootstrap.min.css">
<style>
# 设置placeholder字体颜色
input::-webkit-input-placeholder{
color:rgb(51, 122, 183);
}
input::-moz-placeholder{ /* Mozilla Firefox 19+ */
color:rgb(51, 122, 183);
}
input:-moz-placeholder{ /* Mozilla Firefox 4 to 18 */
color:rgb(51, 122, 183);
}
input:-ms-input-placeholder{ /* Internet Explorer 10-11 */
color:rgb(51, 122, 183);
}
.pg {
line-height: 26px;
}
#jump,#per_page_num {
padding: -1px;
margin: -1px;
border: 1px solid rgb(221, 221, 221);
width: 70px;
line-height: 30px;
font-size: 14px;
color: rgb(51, 122, 183);
}
#x1,#x2 {
padding: 0;
}
</style>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<table class="table">
<thead>
<tr>
<th>ID</th>
<th>名称</th>
<th>价格</th>
</tr>
</thead>
<tbody>
# 获取当前页所有数据，循环替换
{% for page in page_obj.object_list %}
<tr>
<td>{{ page.id }}</td>
<td>{{ page.name }}</td>
<td>{{ page.price }}</td>
</tr>
{% endfor %}
</tbody>
</table>
<div class="text-center">
<nav aria-label="Page navigation">
<ul class="pagination pg">
# 如果当前页有上一页(跳转到首页)，则跳转否则禁止点击
{% if page_obj.has_previous %}
<li>
{# <a href="/?page={{ page_obj.previous_page_number }}" aria-label="Previous">#}
<a href="/?page=1&per_page={{ per_page }}" aria-label="Previous">
<span aria-hidden="true">«</span>
</a>
</li>
{% else %}
<li class="disabled">
<a href="" aria-label="Previous">
<span aria-hidden="true">«</span>
</a>
</li>
{% endif %}
# 分页a标签添加跳转链接，当前页添加active属性
{% for page_num in page_range %}
{% if page_num_int == page_num %}
<li class="active"><a href="/?page={{ page_num }}">{{ page_num }}</a></li>
{% else %}
<li><a href="/?page={{ page_num }}&per_page={{ per_page }}">{{ page_num }}</a></li>
{% endif %}
{% endfor %}
#如果不是最后一页则展示，否则不展示
{% if page_num_int != paginator.num_pages %}
<li><a href="/?page={{ paginator.num_pages }}&per_page={{ per_page }}">... {{ paginator.num_pages }}</a></li>
{% endif %}
# 如果有下一页则跳转，否则禁用
{% if page_obj.has_next %}
<li>
{# <a href="/?page={{ page_obj.next_page_number }}" aria-label="Next">#}
<a href="/?page={{ paginator.num_pages }}&per_page={{ per_page }}" aria-label="Next">
<span aria-hidden="true">»</span>
</a>
</li>
{% else %}
<li class="disabled">
<a href="" aria-label="Next">
<span aria-hidden="true">»</span>
</a>
</li>
{% endif %}
# 设置跳转
<li>
<span id="x1"><input type="text" id="jump" size="2" title="输入页码，按回车快速跳转" placeholder="{{ page_num_int }}/ {{ paginator.num_pages }} 页"
onkeydown="if(event.keyCode===13) {window.location='?page='+this.value+'&per_page={{ per_page }}'; doane(event);}">
</span>
</li>
# 设置分页个数
<li>
<span id="x2">
<input type="text" id="per_page_num" size="2" placeholder=" 条数:{{ per_page }}"
onkeydown="if(event.keyCode===13) {window.location='?page='+ '{{ page_num_int }}&per_page=' + this.value; doane(event);}">
</span>
</li>
</ul>
</nav>
</div>
</div>
</div>
</div>
</body>
</html>
|
