自定义分页样式

一.基本安装和配置

1.pip install django-pure-pagination

2. settings.py中
install app中添加'pure_pagination',

3. settings.py中添加参数
PAGINATION_SETTINGS = {
    'PAGE_RANGE_DISPLAYED': 2,
    'MARGIN_PAGES_DISPLAYED': 2,
    'SHOW_FIRST_PAGE_WHEN_INVALID': True,
}

PAGE_RANGE_DISPLAYED：总共会显示多少页。下面例子中从1到100的话，这里要设为100
MARGIN_PAGES_DISPLAYED：旁边会显示多少个。
SHOW_FIRST_PAGE_WHEN_INVALID：当输入页数不合法是否要跳到第一页

二. view中添加分页配置

def author_list(request):
    all_authors = Author.objects.all()
    try:
        page = request.GET.get('page', 1)
    except PageNotAnInteger:
        page = 1

    p = Paginator(all_authors,2,request=request)   #2 表示每页的数量
    page_1 = p.page(page) 
   
    return render(request, 'web/fenye.html', locals())

三. 前端展示代码

1.数据展示部分代码中的对象修改，这里page_1要改成page_1.object_list

object_list表示在当前这页上的对象列表

<div id="content">
  <div  style="padding-left: 25px; ">
    <table class="table"  >
    <thead>
      <tr>
        <th>文章名称</th>

      </tr>
    </thead>
    <tbody>
      {% for row in page_1.object_list %}
        <tr>
          <td>{{ row.username }}</td>
  
        </tr>
      {% endfor %}
    </tbody>
    </table>
  </div>
</div>

2.分页需结合bootstrap

<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">

3.自定义分页部分代码如下

默认样式可以使用{{page_1.render}},即可完成分页

<nav aria-label="Page navigation">
  <ul class="pagination">
   {% if page_1.has_previous %}
     <li>
       <a href="?{{ page_1.previous_page_number.querystring }}" aria-label="Previous">
         <span aria-hidden="true">上一页</span>
       </a>
     </li>
   {% else %}
     <li class="disabled">
       <a aria-label="Previous">
         <span aria-hidden="true">上一页</span>
       </a>
     </li>
   {% endif %}
   {% for page in page_1.pages %}
       {% if page %}
           {% ifequal page page_1.number %}
               <li class="active"><a href="?{{ page.querystring }}">{{ page }}</a></li>
           {% else %}
               <li><a href="?{{ page.querystring }}">{{ page }}</a></li>
           {% endifequal %}
       {% else %}
           ...
       {% endif %}
   {% endfor %}
   {% if page_1.has_next %}
     <li>
       <a href="?{{ page_1.next_page_number.querystring }}" aria-label="Next">
         <span aria-hidden="true">下一页</span>
       </a>
     </li>
   {% else %}
     <li class="disabled">
       <a aria-label="Next">
         <span aria-hidden="true">下一页</span>
       </a>
     </li>
   {% endif %}
   </ul>

其中page_1要就是view中自己定义的分页对象。

参考：

https://blog.csdn.net/L1119873113/article/details/95374720

https://blog.csdn.net/weixin_42289273/article/details/108887160