django基础——前后端分离，页面分页

一、先找一个前端的分页样式，代码如下

 <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
ul.pagination {
    display: inline-block;
    padding: 0;
    margin: 0;
}

ul.pagination li {display: inline;}

ul.pagination li a {
    color: black;
    float: left;
    padding: 8px 16px;
    text-decoration: none;
}

    ul.pagination li a.active {
    background-color: #4CAF50;
    color: white;
}

ul.pagination li a:hover:not(.active) {background-color: #ddd;}
</style>
</head>
<body>

<h2>简单的分页</h2>
<ul class="pagination">
  <li><a href="#">«</a></li>
  <li><a href="#">1</a></li>
  <li><a class="active" href="#">2</a></li>
  <li><a href="#">3</a></li>
  <li><a href="#">4</a></li>
  <li><a href="#">5</a></li>
  <li><a href="#">6</a></li>
  <li><a href="#">7</a></li>
  <li><a href="#">»</a></li>
</ul>

</body>
</html>

样式：

一、django自带的分页方法：

# 分页  Paginator
from django.core.paginator import Paginator

l=list(range(100))
page_obj=Paginator(l,20)
print(page_obj.count)   #总数据条数
print(list(page_obj.get_page(1)))   #获取第几页的数据
print(page_obj.num_pages)   #总共分了多少页
print(page_obj.page_range)   #分页范围。用于点第几页直接跳到第几页

# 判断是否有上下页
page_1=page_obj.get_page(1)
page_1.has_next()   #是否有下一页
page_1.has_other_pages()   #是否有其他页
page_1.has_previous()   #是否有上一页
page_1.next_page_number()   #下一页的页码
page_1.previous_page_number() #上一页的页码  如果没有上一页  运行会报错
page_1.end_index()#首页
page_1.start_index()#最后一页

二：前端调用分页方法：index.html

{% block pagination %}

    {% if articles.has_other_pages %} <!-- 是否有其他页-->
    <div>
        <ul class="pagination">

            {% if articles.has_previous  %}
              <li><a href="/index/?limit={{ page_limit }}&page={{ articles.previous_page_number }}">«</a></li>
                {% endif %}

        {% for num in articles.paginator.page_range %}
            {% if articles.number == num%}
              <li><a class="active" href="/index/?limit={{ page_limit }}&page={{ num }}">{{ num }}</a></li>
            {% else %}
                <li><a href="/index/?limit={{ page_limit }}&page={{ num }}">{{ num }}</a></li>
            {% endif %}
        {% endfor %}
                    {% if articles.has_next  %}
                                <li><a href="/index/?limit={{ page_limit }}&page={{ articles.next_page_number }}">»</a></li>
                    {% endif %}

{#              <li><a href="#">»</a></li>#}

        </ul>
    </div>


    {% endif %}


{% endblock %}

三、views.py文件的index方法

def index(request):
    limit=request.GET.get('limit',page_limit)   #get方法获取url后边的传的参数。这里的page_limit是写死的值，可以在其他数据配置文件中更改
    page=request.GET.get('page',1)
    # request.POST.get()   #post方法获取url后边的数据
    page_obj=Paginator(models.Article.objects.all().order_by('id'),limit)#order_by('id')按id排序
    page_data=page_obj.get_page(page)
    dic={'articles':page_data}
    return render(request,'index.html',dic)   #自动找index文件,要return render ,否则会报错