初学Django和前段开发。我想用django-pagination
来实现多个objects(比如博文、图片等)的分页功能。我根据《七步教你实现Django网站列表自动分页》来配置django-pagination
。我自己写了一个简单的测试:在views.py
中直接返回entries
(一个字符串列)到模板文件display.html
中。模板文件定义display.html
如下,其中添加了bootstrap
:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example of Bootstrap 3 Pagination</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<style type="text/css">
.bs-example{
margin: 20px;
}
</style>
</head>
<body>
<div class="bs-example">
<div class="pagination">
{% load pagination_tags %}
{% autopaginate entries 1 %}
{% for entry in entries %}
<p>{{ entry }}</p>
{% endfor %}
{% paginate %}
</div>
</div>
</body>
</html>
最后在浏览器看到的效果是:
我希望的浏览页面栏的效果是:
或者
请教大家我应该怎么修改才能实现上述效果?感谢!
在templates
目录下添加pagination/pagination.html
文件,内容大致是下面这样,当然你可以自己修改
{% if is_paginated %}
{% load i18n %}
<nav id="pc_pagination" class="text-center">
<ul class="pagination">
{% if page_obj.has_previous %}
<li><a href="?page={{ page_obj.previous_page_number }}{{ getvars }}{{ hashtag }}" 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 %}
{% for page in pages %}
{% if page %}
{% ifequal page page_obj.number %}
<li class="active"><a href="#">{{ page }} <span class="sr-only">(current)</span></a></li>
{% else %}
<li><a href="?page={{ page }}{{ getvars }}{{ hashtag }}">{{ page }} </a></li>
{% endifequal %}
{% else %}
<li><a href="#">...</a></li>
{% endif %}
{% endfor %}
{% if page_obj.has_next %}
<li><a href="?page={{ page_obj.next_page_number }}{{ getvars }}{{ hashtag }}" 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>
</li>
{% endif %}
</ul>
</nav>
{% endif %}