Django 学习笔记 - 分页器优化

---

显示当前页及其前后两页

显示省略号标记

显示首尾页

将“页数描述文字”放置在“页码栏”下方

• views.py

  	paginator = Paginator([], 10)
      p = int(request.GET.get("p"))
  
      page_object = paginator.page(p)
      page_range = paginator.page_range
      current_page_num = page_object.number
      
      # 设置前后可显示页码范围
      page_range = list(range(max(current_page_num - 2, 1), current_page_num)) + list(
          range(current_page_num, min(current_page_num + 2, paginator.num_pages) + 1))
      
      # 添加省略号标记
      if page_range[0] - 1 >= 2:
          page_range.insert(0, '...')
      if paginator.num_pages - page_range[-1] >= 2:
          page_range.append('...')
  
      # 再将第一页与最后一页始终显示
      if page_range[0] != 1:
          page_range.insert(0, 1)
      if page_range[-1] != paginator.num_pages:
          page_range.append(paginator.num_pages)
  
      data = {
          "num_pages": paginator.num_pages,
          "page_object": page_object,
          'page_range': page_range
      }
      return render(...)
  

• html

  <nav aria-label="Page navigation">
          <ul class="pagination">
  
              {% if page_object.has_previous %}
                  <li>
                      <a href="?p={{ page_object.previous_page_number }}" aria-label="Previous">
                          <span aria-hidden="true">&laquo;</span></a>
                  </li>
              {% else %}
                  <li class="disabled">
                      <a href="#" aria-label="Previous">
                          <span aria-hidden="true">&laquo;</span>
                      </a>
                  </li>
              {% endif %}
  
              {% for range_index in page_range %}
                  {% ifequal range_index page_object.number %}
                      <li class="active"><a href="?p={{ range_index }}">{{ range_index }}</a></li>
                  {% else %}
                      {% ifequal range_index '...' %}
                          {# '...'时不可点击#}
                          <li class="disabled"><span>{{ range_index }}</span></li>
                      {% else %}
                          <li><a href="?p={{ range_index }}">{{ range_index }}</a></li>
                      {% endifequal %}
  
                  {% endifequal %}
              {% endfor %}
  
  
              {% if page_object.has_next %}
                  <li>
                      <a href="?p={{ page_object.next_page_number }}" aria-label="Next">
                          <span aria-hidden="true">&raquo;</span>
                      </a>
                  </li>
              {% else %}
                  <li class="disabled">
                      <a href="#" aria-label="Next">
                          <span aria-hidden="true">&raquo;</span>
                      </a>
                  </li>
              {% endif %}
          </ul>
      </nav>
      {#增加页面描述#}
      <div class="paginator">
          <p>
              共有{{ page_object.paginator.count }}条,
              当前为第{{ page_object.number }}页,
              共{{ page_object.paginator.num_pages }}页
          </p>
      </div>
  

---