django-pagination中怎样显示bootstrap样式

发布于 2022-09-01 07:07:26 字数 1771 浏览 24 评论 0

初学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>

最后在浏览器看到的效果是：
图片描述

我希望的浏览页面栏的效果是：
图片描述
或者

请教大家我应该怎么修改才能实现上述效果？感谢！

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

桜花祭 2022-09-08 07:07:26

在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 %}

回复收藏 0

~没有更多了~