Django框架-管理后台项目之分页实现

一、自定义分页

分页功能在每个网站都是必要的，对于分页来说，其实就是根据用户的输入计算出应在数据库表中的起始位置。

1、设定煤业显示的数据条数

2、用户输入页码（第一页，第二页...）

3、根据设定的每页显示条数和当前页码，计算出需要取数据表的起始位置

4、在数据表中根据起始位置取值，页面上输出数据

前面那样会在页面中生成所有的页码，但实际需要是设定指定数量的页码，格式如［上一页］［1］［2］［3］［4］［5］［下一页］

1、设定每页显示数据条数

2、用户输入页码

3、设定显示多少页号

4、获取当前数据总条数

5、根据设定显示多少页号和数据总条数计算出总页数

6、根据设定的每页显示条数和当前页码数，计算出需要取数据表的起始位置

7、在数据表中根据起始位置取值，页面上输出数据

8、输出分页html，如：［上一页］［1］［2］［3］［4］［5］［下一页］

urls.py

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

customer.html

{% load static %}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="icon" href="{% static 'imgs/aimp_logo_48px_.ico' %}">
    {% block title %}
        {#下面的是改网页的标题上的图标#}
        <title>Template</title>
    {% endblock %}

    <!-- Bootstrap core CSS -->
    <link href="{% static 'plugin/bootstrap3.7/css/bootstrap.min.css' %}" rel="stylesheet">
    <!-- font_awesome CSS -->
    <link rel="stylesheet" href="{% static 'plugin/font-awesome-4.7.0/css/font-awesome.min.css' %}">
    <!-- Custom styles for this template网上模板定义的css样式 -->
    <link href="{% static 'css/dashboard.css' %}" rel="stylesheet">

    {% block custom_css %}
        {#自定义css留白#}
    {% endblock %}

</head>

<body>
{#导航组件#}
{% include 'layout/navbar.html' %}

{#内容区#}
<div class="container-fluid">
    <div class="row">
        {#左侧边栏#}
        <div class="col-sm-3 col-md-2 sidebar">
            <ul class="nav nav-sidebar">
                <li class="active"><a href="{% url 'app_crm:customer_list' %}">客户信息表 <span
                        class="sr-only">(current)</span></a></li>
                <li><a href="#">销售</a></li>
                <li><a href="#">老师</a></li>
                <li><a href="#">学生</a></li>
            </ul>
        </div>
        {#右边内容展示区,表单及面板#}
        <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
            {% block content %}
                <h2 class="sub-header">客户信息展示表</h2>
                <div class="table-responsive">
                    <table class="table table-striped">
                        <thead>
                        <tr>
                            <th>序号</th>
                            <th>账户</th>
                            <th>密码</th>
                        </tr>
                        </thead>
                        <tbody>
                        {% for u in user %}
                            <tr>
                                <td>{{ forloop.counter }}</td>
                                <td>{{ u.name }}</td>
                                <td>{{ u.pwd }}</td>
                            </tr>
                        {% empty %}
                            <tr>
                                <td colspan="3" class="text-center">暂无数据</td>
                            </tr>
                        {% endfor %}
                        </tbody>
                    </table>
                    {# 分页 #}
                    <nav aria-label="Page navigation" class="text-center">
                        <ul class="pagination">
                            <li>
                                <a href="#" aria-label="Previous">
                                    <span aria-hidden="true">&laquo;</span>
                                </a>
                            </li>
                            {% for page in total_page %}
                                {# 此处也可以设计url为分组的形式传递页码给后台{% url 'app_crm:base' page %}#}
                                <li><a href="{% url 'app_crm:base' %}?page={{ page }}">{{ page }}</a></li>
                            {% endfor %}
                            <li>
                                <a href="#" aria-label="Next">
                                    <span aria-hidden="true">&raquo;</span>
                                </a>
                            </li>
                        </ul>
                    </nav>
                </div>
            {% endblock %}
        </div>
    </div>
</div>


<!-- Bootstrap core JavaScript -->
<!-- Placed at the end of the document so the pages load faster -->
<script type="text/javascript" src="{% static 'plugin/jquery-3.3.1/jquery3.3.1.min.js' %}"></script>
<script type="text/javascript" src="{% static 'plugin/bootstrap3.7/js/bootstrap.min.js' %}"></script>
{#自定义js留白区域快#}
{% block custom_js %}
{% endblock %}
</body>
</html>