如何为django-endless-pagination设置Bootstrap主题?

时间:2015-05-10 08:10:28

标签: django twitter-bootstrap pagination

我是Django和前端开发的新手。我想使用Bootstrap主题构建一些带有分页的Django应用程序。我发现django-endless-pagination对于分页非常有用。为了获得Bootstrap主题,我尝试了django-endless-pagination-bootstrap-theme

我的views.py刚刚返回了display.html中显示的条目列表,其编码为:

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">

{% load endless %}

{% paginate entries %}

{% for entry in entries %}
    <p>{{ entry.value }}</p>
{% endfor %}

<div class="pagination">
{% show_pages %}
</div>

然而,我所拥有的分页风格(如图1所示)与django-endless-pagination-bootstrap-theme网站所示的分页风格完全不同(如图2所示)。

图。 1

enter image description here

图。 2

enter image description here

我可以知道我的例子中有什么问题吗?

谢谢。

2 个答案:

答案 0 :(得分:4)

对于使用ajax的django-el-pagination的bootstrap 3,将{%show pages%}替换为以下内容:

{% get_pages %}
    <ul class="pagination">
        {% for page in pages %}
            <li>
                <a href="{{ page.path }}" rel="page" class="endless_page_link">{{ page.number }}</a>
            </li>
        {% endfor %}
   </ul>

答案 1 :(得分:3)

您必须在html文件中(body结束标记之前)包含.js文件。例如:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>

<强>更新

也许,而不是

<div class="pagination">
{% show_pages %}
</div>

你可以这样使用bootstrap 3.3.4

{% get_pages %}
<ul class="pagination">
{% for page in pages %}
    <li><a href="{{ page.url }}">{{ page.number }}</a></li>
{% endfor %}
</ul>