【问题标题】:How to set Bootstrap theme for django-endless-pagination?如何为 django-endless-pagination 设置 Bootstrap 主题?
【发布时间】:2015-07-20 20:44:43
【问题描述】:

我是 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

图。 2

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

谢谢。

【问题讨论】:

  • github上的代码是bootstrap2的,你用的是bootstrap3
  • @Cheng,感谢您的评论。在这种情况下,我可以知道是否有一些针对 bootstrap3 的解决方法吗?
  • 我认为你不需要使用来自 github 的代码。只需遵循 boostrap3 的指南并自己设计元素就足够了。

标签: django twitter-bootstrap pagination


【解决方案1】:

对于使用 ajax 的 django-el-pagination 引导 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>

【讨论】:

  • 对我不起作用,这会转储页面上的所有页码。
【解决方案2】:

您还必须在 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>

【讨论】:

  • 我在html文件中添加了这两行。但是风格还是一样的。
  • github 上的代码已有两年历史,因此不适用于 bootstrap 3.3.4。但是,正如@Cheng 所说,您可以使用引导程序设置分页样式。
  • 我做了一个完整的例子,包括第一页、上一页、下一页和最后一页,以防有人仍然觉得它有用。 djangosnippets.org/snippets/10546
  • @se210 感谢您提供此链接,但在我看来,{% if page == None %} 条件从未触发。接下来,您的代码将返回所有不带 ... 符号的页面。例如,在我的情况下,我看到 200 页。如何解决?
猜你喜欢
  • 1970-01-01
  • 2013-01-18
  • 2012-03-14
  • 2018-06-02
  • 2013-08-07
  • 2013-03-24
  • 1970-01-01
  • 2013-04-19
  • 1970-01-01
相关资源
最近更新 更多