简单的分页器实现

urls.py

urlpatterns = [
    url(r'^page/', views.page,name='page'),
]

views.py

users = [{"name": f"alex{i}", "pwd": "dsb"} for i in range(1, 355)]

def page(request):
    user_list = users
    try:
        page = int(request.GET.get('page', 1))
        if page <= 0:
            page = 1
    except Exception:
        page = 1

    """
    索引切片
    page   起始   终止
    1       0     10
    2       10    20
    3       20    30
    """
    # 每页展示的数据
    per_num = 10
    # 数据切片起始值
    start = (page - 1) * per_num
    # 数据切片终止值
    end = page * per_num
    # 总数据条数
    page_count = len(user_list)
    # 总页码数
    sum_page, more = divmod(page_count, per_num)
    if more:
        sum_page += 1
    # 前端循环的a标签的值
    num = [i for i in range(1, sum_page + 1)]
    user_list = user_list[start:end]
    return render(request, 'page.html', locals())

html.py(bootstrap样式中的分页组件)

   <div class="form-group col-sm-7">
        <table class="table table-hover table-bordered">
            <thead>
            <tr>
                <th>name</th>
                <th>pwd</th>
            </tr>
            </thead>
            <tbody>
            {% for user in user_list %}
                <tr>
                    <td>{{ user.name }}</td>
                    <td>{{ user.pwd }}</td>
                </tr>
            {% endfor %}
            </tbody>
        </table>
    </div>

    <div class="pull-left form-group col-sm-7">
        <nav aria-label="Page navigation">
            <ul class="pagination">
                <li>
                    <a href="#" aria-label="Previous">
                        <span aria-hidden="true">&laquo;</span>
                    </a>
                </li>
                {% for n in num %}
                    <li><a href="{% url 'page' %}?page={{ n }}">{{ n }}</a></li>
                {% endfor %}
                <li>
                    <a href="#" aria-label="Next">
                        <span aria-hidden="true">&raquo;</span>
                    </a>
                </li>
            </ul>
        </nav>
    </div>

效果：简单的分页完成

 上面功能中展示了数据的所有的页码，接下来我们将会对页码的展示进行升级，如：每页展示十个页码

页码数量限制

url与html文件不变

views.py

users = [{"name": f"alex{i}", "pwd": "dsb"} for i in range(1, 301)]

def page(request):
    user_list = users
    try:
        page = int(request.GET.get('page', 1))
        if page <= 0:
            page = 1
    except Exception:
        page = 1

    """
    索引切片
    page   起始   终止
    1       0     10
    2       10    20
    3       20    30
    """
    # 每页展示的数据
    per_num = 10
    # 数据切片起始值
    start = (page - 1) * per_num
    # 数据切片终止值
    end = page * per_num
    # 总数据条数
    page_count = len(user_list)
    # 总页码数
    sum_page, more = divmod(page_count, per_num)
    if more:
        sum_page += 1
    # 前端循环的a标签的值
    num = [i for i in range(1, sum_page + 1)]

    # 页码限制
    # 页面最大显示页码
    max_show = 10
    # 页码的切片的起始值
    page_start = 0
    # 页码切片的终止值
    page_end = max_show
    # 页码的偏移量
    half_page = max_show // 2
    if page < max_show:
        """
        如果page在第一页，什么都不做，即page_start=0,page_end=max_show
        """
        pass
    if page > sum_page:
        """
        如果page参数大于总页码数，跳转到最后一页，针对于url上面手动输入page参数
        """
        # 终止值为最后一页
        page_end = sum_page
        # 起始值向前便宜half_page
        page_start = page_end - half_page
        # 数据部分也需要设定，不然显示为空
        start = (sum_page - 1) * per_num
        end = sum_page * per_num
    else:
        """
        page当前页码即不在第一页，也不在最后一页（或超过最后一页），起始值向前偏移half_page,向后偏移half_page
        """
        page_start = page - half_page
        page_end = page + half_page
    
    # 当总页码数小于每页最大展示页码数量时，无论在那一页都展示全部的页码(针对数据少，page处于max_show与sum_page之间时的bug)
    if sum_page < max_show:
        page_start = 0
        page_end = sum_page
        
    num = num[page_start:page_end]
    user_list = user_list[start:end]
    return render(request, 'page.html', locals())

当前页选中

bootstrap中active类选择器是激活的样式，在前端判断后台接收到的page登不等于前端的页码，等于则添加激活样式。

html文件

......
 <div class="pull-left form-group col-sm-7">
        <nav aria-label="Page navigation">
            <ul class="pagination">
                <li>
                    <a href="#" aria-label="Previous">
                        <span aria-hidden="true">&laquo;</span>
                    </a>
                </li>
                {% for n in num %}
                    <li class="{% if page == n %}active{% endif %}"><a href="{% url 'page' %}?page={{ n }}">{{ n }}</a>  {# 主要操作在这里#}
                    </li>
                {% endfor %}
                <li>
                    <a href="#" aria-label="Next">
                        <span aria-hidden="true">&raquo;</span>
                    </a>
                </li>
            </ul>
        </nav>
    </div>
......

正常情况下，激活样式是完成的，但这里有个bug就是当手动在url地址中输入大于总页码的page时就没有激活样式了，所以，我们需要在views文件中针对性的将page修改一下，如下：

......
    if page > sum_page:
        """
        如果page参数大于总页数，跳转到最后一页，针对于url上面手动输入page参数
        """
        # 终止值为最后一页
        page_end = sum_page
        # 起始值向前便宜half_page
        page_start = page_end - half_page
        # 数据部分也需要设定，不然显示为空
        start = (sum_page - 1) * per_num
        end = sum_page * per_num
        # 当page大于总页码时，让page等于最大的页码，为了给最后一页添加激活样式  # 主要操作在这里，原理是：因为当用户手动输入的页码大于总页码时，后台获取的数据与前端的必然不同，因此，我们在这里手动将page设置为总页码，即可。
        page = sum_page
......

效果如图：

 激活样式添加完成

后台进行页码样式的编写及上下页设置

这里主要在后台生成html代码（页码相关的html代码，包括样式的激活，上下页等，都在后台生成，前端只需要调用即可）

views.py

# -*- coding: utf-8 -*-
# __author__ = "maple"


users = [{"name": f"alex{i}", "pwd": "dsb"} for i in range(1, 301)]

def page(request):
    user_list = users
    try:
        page = int(request.GET.get('page', 1))
        if page <= 0:
            page = 1
    except Exception:
        page = 1

    """
    索引切片
    page   起始   终止
      0     10
      10    20
      20    30
    """
    # 每页展示的数据
    per_num = 3
    # 数据切片起始值
    start = (page - 1) * per_num
    # 数据切片终止值
    end = page * per_num
    # 总数据条数
    page_count = len(user_list)
    # 总页码数
    sum_page, more = divmod(page_count, per_num)
    if more:
        sum_page += 1
    # 前端循环的a标签的值
    num = [i for i in range(1, sum_page + 1)]

    # 页码限制
    # 页面最大显示页码
    max_show = 6
    # 页码的切片的起始值
    page_start = 0
    # 页码切片的终止值
    page_end = max_show
    # 页码的偏移量
    half_page = max_show // 2

    if page < max_show:
        """
        如果page在第一页，什么都不做，即page_start=0,page_end=max_show
        """
        pass
    if page > sum_page:
        """
        如果page参数大于总页码数，跳转到最后一页，针对于url上面手动输入page参数
        """
        # 终止值为最后一页
        page_end = sum_page
        # 起始值向前偏移half_page
        page_start = page_end - half_page
        # 数据部分也需要设定，不然显示为空
        start = (sum_page - 1) * per_num
        end = sum_page * per_num
        # 当page大于总页码时，让page等于最大的页码，为了给最后一页添加激活样式
        page = sum_page
    else:
        """
        page当前页码即不在第一页，也不在最后一页（或超过最后一页），起始值向前偏移half_page,向后偏移half_page
        """
        page_start = page - half_page
        page_end = page + half_page

    # 当总页码数小于每页最大展示页码数量时，无论在那一页都展示全部的页码(针对数据少，page处于max_show与sum_page之间时的bug)
    if sum_page < max_show:
        page_start = 0
        page_end = sum_page

    num = num[page_start:page_end]

    html_list = []
    # 页码样式的头
    html_list.append(
        '<div class="pull-left form-group col-sm-7"><nav aria-label="Page navigation"><ul class="pagination">')
    # 当当前页为1时，添加上一页禁用样式disabled
    if page == 1:
        html_list.append(
            '<li class="disabled"><a aria-label="Previous"><span aria-hidden="true">&laquo;</span></a></li>')
    else:
        html_list.append(
            '<li ><a href="?page={}" aria-label="Previous"><span aria-hidden="true">&laquo;</span></a></li>'.format(
                page - 1))

    for n in num:
        if page == n:
            html_list.append('<li class="active"><a>{}</a></li>'.format(n))
        else:
            html_list.append('<li><a href="?page={}">{}</a></li>'.format(n, n))

    # 当前页为最后一页时，添加下一页禁用样式disabled
    if page == sum_page:
        html_list.append(
            '<li class="disabled"><a  aria-label="Next"><span aria-hidden="true">&raquo;</span></a></li>')
    else:
        html_list.append(
            '<li><a href="?page={}" aria-label="Next"><span aria-hidden="true">&raquo;</span></a></li>'.format(
                page + 1))

    # 页码样式的尾
    html_list.append('</ul></nav></div>')

    # 将列表中的html代码拼接起来
    html_list = "".join(html_list)

    user_list = user_list[start:end]
    return render(request, 'page.html', locals())
 

View Code