Django+paginator实现分页+省略号代替多余页码+页面跳转（分页最全功能all_in）

最新推荐文章于 2022-09-29 15:58:57 发布

Call me 程序员

最新推荐文章于 2022-09-29 15:58:57 发布

阅读量4.2k

点赞数 3

分类专栏： paginator 文章标签： pagination django javascript web html

本文链接：https://blog.csdn.net/qq_39360565/article/details/104358982

版权

paginator 专栏收录该内容

2 篇文章 2 订阅

订阅专栏

个人拙见，可能还有更好的办法，望指正！

先上图看一下效果：

在这里插入图片描述
js插件引入：

jQuery
bootstrap

借图分析功能点（注意参数代表的意义）：

页数 num_pages <= 12 时：页码不加省略号，所有页码全部显示.
形如：< 1 2 3 4 5 6 7 8 9 10 11 12 >
页数 num_pages > 12 时：页码加省略号显示.
形如：< 1 2 3 4 5 6 7 8 9 10 … 20 >

将情况理清楚之后，接着分析加省略号之后的逻辑情况：
注意：此时分析的是 num_pages > 12

当request请求页码数 page.number >= 1 and page.number <= 10：
显示样式：< 1 2 3 4 5 6 7 8 9 10 … 20 >
当request请求页码数 page.number == num_pages，也就是最后一页：
显示样式：< 1 2 3 4 5 6 7 8 9 10 … 20 >
（同上）
当request请求页码数 page.number == 11：
显示样式：< 1 2 3 4 5 6 7 8 9 10 11 … 20 >
当request请求页码数 page.number == lastButOne，也就是倒数第二页：
显示样式：< 1 2 3 4 5 6 7 8 9 10 … 19 20 >
以上格式都不是，也就是 page.number > 11 and page.number < lastButOne
显示样式：< 1 2 3 4 5 6 7 8 9 10 … 15 … 20 >

分析好逻辑思想之后再来看代码就不会那么迷糊了：
这里需要解释一下，因为使用的是Django框架，我这里将结合前后端来进行上述思想的逻辑判断，当然也可以使用JS来进行，也可以使用后端来判断，减少前端运行压力。

HTML分页代码

<nav aria-label="Page navigation" style="float: right">
        <ul class="pagination">
            <li>
                {% if Page.has_previous %}
                    <a href="?page={{ Page.previous_page_number }}" aria-label="Previous">
                        <span aria-hidden="true">&laquo;</span>
                    </a>
                {% endif %}
            </li>
            <!-- 形如 12345678910...13 -->
            <li>
                {% if ifEllipsis == 1 %}
                    {% if Page.number >= 1 and Page.number <= 10 %}
                        {% for i in range1 %}
                            {% if i >= 1 and i <= 10 %}
                                <li {% if Page.number == i %} class="active" {% endif %}>
                                    <a href="?page={{ i }}">{{ i }}</a>
                                </li>
                            {% elif i == 12 %}
                                <li {% if Page.number == Page.paginator.num_pages %} class="active" {% endif %}>
                                    <a href="?page={{ Page.paginator.num_pages }}">{{ Page.paginator.num_pages }}</a>
                                </li>
                            {% elif i == 11 %}
                                <li>
                                    <a>...</a>
                                </li>
                            {% endif %}
                        {% endfor %}
                    {% elif Page.number == Page.paginator.num_pages %}
                        {% for i in range1 %}
                            {% if i >= 1 and i <= 10 %}
                                <li {% if Page.number == i %} class="active" {% endif %}>
                                    <a href="?page={{ i }}">{{ i }}</a>
                                </li>
                            {% elif i == 12 %}
                                <li {% if Page.number == Page.paginator.num_pages %} class="active" {% endif %}>
                                    <a href="?page={{ Page.paginator.num_pages }}">{{ Page.paginator.num_pages }}</a>
                                </li>
                            {% elif i == 11 %}
                                <li>
                                    <a>...</a>
                                </li>
                            {% endif %}
                        {% endfor %}
                    {% elif Page.number == 11 %}
                        {% for i in range3 %}
                            {% if i >= 1 and i <= 10 %}
                                <li {% if Page.number == i %} class="active" {% endif %}>
                                    <a href="?page={{ i }}">{{ i }}</a>
                                </li>
                            {% elif i == 13 %}
                                <li {% if Page.number == Page.paginator.num_pages %} class="active" {% endif %}>
                                    <a href="?page={{ Page.paginator.num_pages }}">{{ Page.paginator.num_pages }}</a>
                                </li>
                            {% elif i == 11 %}
                                <li {% if Page.number == i %} class="active" {% endif %}>
                                    <a href="?page={{ i }}">{{ i }}</a>
                                </li>
                            {% else %}
                                <li>
                                    <a>...</a>
                                </li>
                            {% endif %}
                        {% endfor %}
                    {% elif Page.number == lastButOne  %}
                        {% for i in range3 %}
                            {% if i >= 1 and i <= 10 %}
                                <li {% if Page.number == i %} class="active" {% endif %}>
                                    <a href="?page={{ i }}">{{ i }}</a>
                                </li>
                            {% elif i == 13 %}
                                <li {% if Page.number == Page.paginator.num_pages %} class="active" {% endif %}>
                                    <a href="?page={{ Page.paginator.num_pages }}">{{ Page.paginator.num_pages }}</a>
                                </li>
                            {% elif i == 12 %}
                                <li {% if Page.number == lastButOne %} class="active" {% endif %}>
                                    <a href="?page={{ lastButOne }}">{{ lastButOne }}</a>
                                </li>
                            {% else %}
                                <li>
                                    <a>...</a>
                                </li>
                            {% endif %}
                        {% endfor %}
                    {% elif Page.number > 11 and Page.number < lastButOne %}
                        {% for i in range2 %}
                            {% if i >= 1 and i <= 10 %}
                                <li {% if Page.number == i %} class="active" {% endif %}>
                                    <a href="?page={{ i }}">{{ i }}</a>
                                </li>
                            {% elif i == 11 %}
                                <li>
                                    <a>...</a>
                                </li>
                            {% elif i == 12 %}
                                <li class="active">
                                    <a href="?page={{ Page.number }}">{{ Page.number }}</a>
                                </li>
                            {% elif i == 13 %}
                                <li>
                                    <a>...</a>
                                </li>
                            {% elif i == 14 %}
                                <li {% if Page.number == Page.paginator.num_pages %} class="active" {% endif %}>
                                    <a href="?page={{ Page.paginator.num_pages }}">{{ Page.paginator.num_pages }}</a>
                                </li>
                            {% endif %}
                        {% endfor %}
                    {% endif %}
                {% elif ifEllipsis == 0 %}
                    {% for i in Page.paginator.page_range %}
                        <li {% if Page.number == i %} class="active" {% endif %}>
                            <a href="?page={{ i }}">{{ i }}</a>
                        </li>
                    {% endfor %}
                {% endif %}
            </li>
            <li>
                {% if Page.has_next %}
                    <a href="?page={{ Page.next_page_number }}" aria-label="Next">
                        <span aria-hidden="true">&raquo;</span>
                    </a>
                {% endif %}
            </li>
            <li>
                <a>共{{ Page.paginator.num_pages }}页</a>
            </li>
            <li>
                跳转至<input type="text" id="pageNum" size="1">页
                <button type="button" class="btn btn-default btn-sm" onclick="getPage();">
                    <span class="glyphicon glyphicon-share-alt" aria-hidden="true"></span>
                </button>
            </li>
        </ul>
    </nav>

views后端代码

	# 一页十条数据
    paginator = Paginator(Data, 10)
    # 获取页码，默认第一页
    page_num = request.GET.get('page', '1')
    try:
        Page = paginator.page(page_num)
    except(PageNotAnInteger, EmptyPage, InvalidPage):
        Page = paginator.page('1')
     #这里是后端逻辑判断
    if Page.paginator.num_pages >= 13:
        ifEllipsis = 1
        range1 = range(1, 13)
        range2 = range(1, 15)
        range3 = range(1, 14)
        lastButOne = Page.paginator.num_pages - 1
    else:
        ifEllipsis = 0

这里需要解释一下range1、range2、range3：
因为Django框架在模板标签{%for%}中是不能直接使用range(1,12)的，所以通过后端传进去之后就可以使用range进行for遍历了。。。。（有一种钻牛角尖的丫子）

接下来介绍如何实现跳转：

上述HTML代码最后已经有跳转的button了，接下来就是解释如何实现链接跳转。

我使用了一个js方法来控制向后端发送GET请求，链接末尾加上pageNum，发送给后端，具体方法如下：

<script type="text/javascript">
    function getPage() {
        var pageNum = $('#pageNum').val();
        if(pageNum >= 1 && pageNum <= {{ Page.paginator.num_pages }}){
            location.assign("{% url 'selectAllDataPage' userInfo.userId %}?page="+pageNum)
        }
        else{
            alert('请输入正确的页码!')
        }
    }
</script>

到此，上述功能全部描述完毕。

如果有错误，麻烦指正，如果有更好的方法，请评论或者私信，感激不尽！^_^

Call me 程序员

关注

3
点赞
踩
16

收藏

觉得还不错? 一键收藏
0
评论
Django+paginator实现分页+省略号代替多余页码+页面跳转（分页最全功能all_in）

先上图看一下效果：js插件引入：jQuerybootstrap借图分析功能点（注意参数代表的意义）：页数 num_pages <= 12 时：页码不加省略号，所有页码全部显示.形如：< 1 2 3 4 5 6 7 8 9 10 11 12 >页数 num_pages > 12 时：页码加省略号显示.形如：< 1 2 3 4 5 6 7 8 9 ...
复制链接

扫一扫