分页自定义

效果图：

后端分页实现原理：

1. x表示当前页，y表示总页数，left_page_range表示当前页左边的页码范围。right_page_range表示当前页右边的页码范围。
2. 当x<=7，left_page_range = (1,x)，此时left_more_page = False。
3. 当x>7，left_page_range = (x-3,x)，此时left_more_page = True。
4. 当x>=y-6，right_page_range(x+1,y+1)，此时right_more_page = False。
5. 当x<y-6，right_page_range(x+1,x+4)，此时right_more_page = True。

前端分页实现原理：

1. 判断当前页是否有上一页，来决定上一页按钮是否可被点击。
2. 判断left_more_page，若为False，则左边页面从1到x；若为True，则左边页码分两部分写，一部分为"1"、”..."，另一部分为x-3到x
3. 判断right_more_page，若为False，则右边页面为x+1到y；若为True，则右边页码分两部分写，一部分为x+1到x+4，另一部分为"..."、“y”。
4. 判断当前页是否有下一页，来决定下一页按钮是否可被点击。

后端逻辑部分代码

def get_paginator_data(paginator, current_page, around_count=3):
    """
    :param paginator: 分页对象
    :param current_page: 当前页数据
    :param around_count: 显示的页码数
    :return: 当前页码、总页数、左边是否有更多页标记、右边是否有更多标记
    左边页码范围、右边页码范围
    """
    current_page_num = current_page.number  # 获取当前页面所在的页码
    total_page_num = paginator.num_pages  # 获取总页数

    left_has_more_page = False  # 默认左边没有更多页
    right_has_more_page = False  # 默认右边没有更多页

    # 算出当前页面左边的页码
    left_start_index = current_page_num - around_count
    left_end_index = current_page_num
    if current_page_num <= around_count * 2 + 1:
        left_page_range = range(1, left_end_index)
    else:
        left_has_more_page = True
        left_page_range = range(left_start_index, left_end_index)

    right_start_index = current_page_num + 1
    right_end_index = current_page_num + around_count + 1
    if current_page_num >= total_page_num - around_count * 2:
        right_page_range = range(right_start_index, total_page_num + 1)
    else:
        right_has_more_page = True
        right_page_range = range(right_start_index, right_end_index)

    return {
        "current_page_num": current_page_num,
        "total_page_num": total_page_num,
        "left_has_more_page": left_has_more_page,
        "right_has_more_page": right_has_more_page,
        "left_pages": left_page_range,
        "right_pages": right_page_range,
    }

前端部分代码：

 <ul class="pagination">
         <!-- 上一页 -->
         {% if news_info.has_previous %}
            <li><a href="?page={{ news_info.previous_page_number }}&{{ other_param }}">上一页</a></li>
           {% else %}
           <li class="disabled"><a href="javascript:void(0);">上一页</a></li>
         {% endif %}
       
          {% if left_has_more_page %}
            <li><a href="?page=1&{{ other_param }}">1</a></li>
            <li><a href="javascript:void(0);">...</a></li>
          {% endif %}
          <!-- 左边的页码 -->
          {% for left_page in left_pages %}
            <li><a href="?page={{ left_page }}&{{ other_param }}">{{ left_page }}</a></li>
          {% endfor %}

          <!-- 当前页面 -->
          {% if current_page_num %}
            <li class="active"><a href="?page={{ current_page_num }}&{{ other_param }}">{{ current_page_num }}</a></li>
          {% endif %}
          <!-- 右边的页面 -->
          {% for right_page in right_pages %}
              <li><a href="?page={{ right_page }}&{{ other_param }}">{{ right_page }}</a></li>
          {% endfor %}

         {% if right_has_more_page %}
          <li><a href="javascript:void(0);">...</a></li>
            <li><a href="?page={{ total_page_num }}&{{ other_param }}">{{ total_page_num }}</a></li>
        {% endif %}

         <!-- 下一页 -->
          {% if news_info.has_next %}
            <li><a href="?page={{ news_info.next_page_number }}&{{ other_param }}">下一页</a></li>
            {% else %}
            <li class="disabled"><a href="javascript:void(0);">下一页</a></li>
          {% endif %}

       </ul>