Django框架-CRM项目之分页实现 / 憋错料

自定义分页

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

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>

html-前端循环生成页码

views.py

 1 def page(request):
 2     """
 3     all_count: 总数据条数
 4     page_num: 每页显示数据条数，自定义
 5     total_page: 总页码数
 6     more：总数据条数% 每页数     ==》余数
 7     current_page: 当前页码，由前端点击时，将页码发回来
 8     """
 9     user = [{‘name‘: ‘sun%s‘ % i, ‘pwd‘: ‘pwd{}‘.format(i)} for i in range(1, 302)]  # 测试数据源
10     all_count = len(user)  # 拿到总数据条数
11     page_num = 10  # 定义每页显示的数据条数
12     total_page, more = divmod(all_count, page_num)  # 得出商和余数
13     if more:  # 如果有余数，表示总页码要多加一个页码,否则就是整除
14         total_page += 1
15
16     try:
17         current_page = int(request.GET.get(‘page‘))
18         if current_page <= 0:  # 因为不确定前端传过来的数字的准确性，可能没有或超过，负数所以要判断,一旦报错，就设置当前页为1
19             raise ValueError()
20     except Exception as e:
21         current_page = 1
22
23     # 所有数据和生成的标签页全部展示
24     # 因为计划通过前端for循环产生标签，故需要传一个可迭代的数据即range(1,total_page+1),切片取头不取尾
25     return render(request, ‘layout/base.html‘, {‘user‘: user, ‘total_page‘: range(1, total_page + 1)})
26
27 # 注：前端拿到user和total_page对象，对其for循环生成对应标签即可

分页初版-显示所有数据和标签

 1 def page(request):
 2     """
 3     all_count: 总数据条数
 4     page_num: 每页显示数据条数，自定义
 5     total_page: 总页码数
 6     more：总数据条数% 每页数     ==》余数
 7     current_page: 当前页码，由前端点击时，将页码发回来
 8     start: 切片开始索引
 9     end: 切片结束索引
10     页码数和切片之间的关系：
11     第一页：  1  1   10        0   10            每页10条，切片从0开始，尾不取
12              2  11  20        10   20
13             3   21  30        20   30
14             关系为：（当前页-1）*10  即 start = (current_page-1)*10
15                                        end= current_page*page_num
16     """
17     user = [{‘name‘: ‘sun%s‘ % i, ‘pwd‘: ‘pwd{}‘.format(i)} for i in range(1, 302)]
18     all_count = len(user)
19     page_num = 10  # 定义每页显示的数据条数
20     total_page, more = divmod(all_count, page_num)  # 得出商和余数
21     if more:  # 如果有余数，表示总页码要多加一个页码,否则就是整除
22         total_page += 1
23     try:
24         current_page = int(request.GET.get(‘page‘))
25         # 因为不确定前端传过来的数字的准确性，可能没有或超过，负数所以要判断,一旦报错，就设置当前页为1
26         if current_page <= 0:
27             raise ValueError()
28     except Exception as e:
29         current_page = 1
30     # 根据前端传过来的页码，计算给前端发送多少数据，限制数据条数
31     start = (current_page - 1) * 10
32     end = current_page * page_num
33
34     return render(request, ‘layout/base.html‘, {‘user‘: user[start:end],   # 限制数据条数，根据需要给
35                                                 ‘total_page‘: range(1, total_page + 1)})

分页过滤版-根据前端需求页码给出对应数量的数据+所有页码标签

def page(request):
    """
        all_count: 总数据条数
        page_num: 每页显示数据条数，自定义
        total_page: 总页码数
        more：总数据条数% 每页数     ==》余数
        current_page: 当前页码，由前端点击时，将页码发回来
        start: 切片开始索引
        end: 切片结束索引
        页码数和切片之间的关系：
        第一页：  1  1   10        0   10            每页10条，切片从0开始，尾不取
                 2  11  20        10   20
                3   21  30        20   30
                关系为：（当前页-1）*10  即 start_page = (current_page-1)*10
                                        end_page = current_page*page_num
        start_page:  起始页码数
        end_page: 终止页码数
        max_page_show:  每页最多展示几个分页，如7各分页：1 2 3 当前页 5 6 7

        """
    user = [{‘name‘: ‘sun%s‘ % i, ‘pwd‘: ‘pwd{}‘.format(i)} for i in range(1, 302)]
    all_count = len(user)
    page_num = 10  # 定义每页显示的数据条数
    total_page, more = divmod(all_count, page_num)  # 得出商和余数
    if more:  # 如果有余数，表示总页码要多加一个页码,否则就是整除
        total_page += 1
    # 因为计划通过前端for循环产生标签，故需要传一个可迭代的数据即range(1,total_page+1),切片取头不取尾
    try:
        current_page = int(request.GET.get(‘page‘))
        # 因为不确定前端传过来的数字的准确性，可能没有或超过，负数所以要判断,一旦报错，就设置当前页为1
        if current_page <= 0:
            raise ValueError()
    except Exception as e:
        current_page = 1
    # 根据前端传过来的页码，计算给前端发送多少数据，限制数据条数
    start = (current_page - 1) * 10
    end = current_page * page_num
    # 定义分页页码起始页码数，终止页码数，每个页面最大显示页码数
    max_page_show = 5  # 一般都定义为奇数，让中间的页(即当前页)左右对称
    half_page_show = max_page_show // 2

    # 将会出现几种情况：
    # 1、数据总页码数<= 定义的每个页面最大显示页码数max_page_show，就直接把所有的显示出来即可
    if total_page <= max_page_show:
        start_page = 1
        end_page = total_page
    else:
        # 2、当前页小于half_page_show时，排除会出现负数的情况，解决左边的问题
        if current_page <= half_page_show:  # 都要保证每个页面有max_page_show页
            start_page = 1
            end_page = max_page_show
        # 3、当前页+half_page_show > max_page_show 时，会出现没有数据，但会有页码，故需要排除掉
        elif current_page + half_page_show > total_page:
            start_page = total_page - max_page_show + 1
            # start_page = current_page - half_page_show +1
            end_page = total_page
        else:
            start_page = current_page - half_page_show
            end_page = current_page + half_page_show
    return render(request, ‘layout/base.html‘, {‘user‘: user[start:end],
                                                ‘total_page‘: range(start_page, end_page + 1)
                                                })  # 限制页面总显示页码数及根据需求页码给出对应数据

分页进阶版-指定页面最大显示页码数，按需要给出对应条数据

def page(request):
    """
    all_count: 总数据条数
    page_num: 每页显示数据条数，自定义
    total_page: 总页码数
    more：总数据条数% 每页数     ==》余数
    current_page: 当前页码，由前端点击时，将页码发回来
    start: 切片开始索引
    end: 切片结束索引
    页码数和切片之间的关系：
    第一页：  1  1   10        0   10            每页10条，切片从0开始，尾不取
             2  11  20        10   20
            3   21  30        20   30
            关系为：（当前页-1）*10  即 start_page = (current_page-1)*10
                                    end_page = current_page*page_num
    start_page:  起始页码数
    end_page: 终止页码数
    max_page_show:  每个页面最大显示页码数，如7各分页：1 2 3 当前页 5 6 7
    """
    user = [{‘name‘: ‘sun%s‘ % i, ‘pwd‘: ‘pwd{}‘.format(i)} for i in range(1, 302)]
    all_count = len(user)  # 得出数据总条数
    page_num = 10  # 定义每页显示的数据条数
    total_page, more = divmod(all_count, page_num)  # 得出商和余数
    if more:
        total_page += 1  # 如果有余数，表示总页码要多加一个页码
    try:
        current_page = int(request.GET.get(‘page‘))
        # 因为不确定前端传过来的数字的准确性，可能没有或超过，负数，所以要判断,一旦报错，就设置当前页为1
        if current_page <= 0:
            raise Exception(‘当前页码数字不符合规范‘)
    except Exception as e:
        current_page = 1

    # 根据前端传过来的页码，计算给前端发送多少数据，限制数据条数
    start = (current_page - 1) * 10
    end = current_page * page_num

    # 定义分页页码起始页码数，终止页码数，每个页面最大显示页码数,实现每页固定页码数
    max_page_show = 5  # 一般都定义为奇数，让中间的页(即当前页)左右对称
    half_page_show = max_page_show // 2

    # 1、数据总页码数<= 定义的每个页面最大显示页码数max_page_show，就直接把所有的显示出来即可
    if total_page <= max_page_show:
        start_page = 1
        end_page = total_page
    else:
        # 2、当前页小于half_page_show时，排除会出现负数的情况，解决左边的问题
        if current_page <= half_page_show:  # 都要保证每个页面有max_page_show页
            start_page = 1
            end_page = max_page_show
        # 3、当前页+half_page_show > max_page_show 时，会出现没有数据，但会有页码，故需要排除掉
        elif current_page + half_page_show > total_page:
            start_page = total_page - max_page_show + 1
            # start_page = current_page - half_page_show +1
            end_page = total_page
        else:
            start_page = current_page - half_page_show
            end_page = current_page + half_page_show

    """后端实现分页，前端只需接收只需接收字符串即可，故需要把生成得标签拼接起来"""
    html_list = []
    # 加上"首页"功能，即当前页与第一页相比【首页】【上一页】 1 2 3 4 5 【下一页】【末页】
    if current_page <= 1:
        first = ‘<li class="disabled"><a>首页</a></li>‘
    else:
        first = ‘<li><a href="{}?page={}">首页</a></li>‘.format(reverse(‘app_crm:base‘), 1)
    html_list.append(first)
    # 加上"上一页"功能，即当前页与第一页相比 【首页】【上一页】 1 2 3 4 5 【下一页】【末页】
    if current_page <= 1:
        prev = ‘<li class="disabled"><a>上一页</a></li>‘  # 当前页小于1时，上一页按钮禁止点击
    else:
        prev = ‘<li><a href="{}?page={}">上一页</a></li>‘.format(reverse(‘app_crm:base‘), current_page - 1)
    html_list.append(prev)
    # 生成分页页码标签
    for page in range(start_page, end_page + 1):
        if page == current_page:  # 加active类
            li_html = ‘<li class="active"><a href="{0}?page={1}">{1}</a></li>‘.format(reverse(‘app_crm:base‘), page)
        else:
            li_html = ‘<li><a href="{0}?page={1}">{1}</a></li>‘.format(reverse(‘app_crm:base‘), page)
        html_list.append(li_html)
    # 加上"下一页"功能，当前页与最后一页比较，即total_page
    if current_page >= total_page:
        next_page = ‘<li class="disabled"><a>下一页</a></li>‘
    else:
        next_page = ‘<li><a href="{}?page={}">下一页</a></li>‘.format(reverse(‘app_crm:base‘), current_page + 1)
    html_list.append(next_page)
    # 加上"末页" 功能
    if current_page >= total_page:
        last = ‘<li class="disabled"><a>末页</a></li>‘
    else:
        last = ‘<li><a href="{}?page={}">末页</a></li>‘.format(reverse(‘app_crm:base‘), total_page)
    html_list.append(last)
    html_str = "".join(html_list)  # 拼接成字符串
    from django.utils.html import format_html  # 后端声明发送的是安全的标签，将字符串编译成标签
    result = format_html(html_str)
    return render(request, ‘layout/base.html‘, {‘user‘: user[start:end],
                                                ‘total_page‘: result
                                                })  # 限制页面总显示页码数及根据需求页码给出对应数据

分页终极版

分页终极版是在后端循环生成分页标签，故前端只需引用即可{{result}} 即可。

{% 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">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <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">
                            {{ total_page }}
                        </ul>
                        <form action="">
                                <span>去第</span>
                                <label for="search_page"></label>
                                <input id="search_page" name="page" type="text"  >
                                <span>页</span>
                                <input type="submit" class=" btn-primary" value="确定">
                        </form>
                    </nav>
                </div>
            {% endblock %}
        </div>
    </div>
</div>
<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>

{% block custom_js %}
    {#自定义js留白区域快#}
{% endblock %}
</body>
</html>

终极html+分页数据+指定数量分页+搜索分页

原文地址：https://www.cnblogs.com/sunxiuwen/p/9750316.html

时间： 2024-08-30 14:52:29

Django框架-CRM项目之分页实现

Django框架-CRM项目之分页实现的相关文章

Django框架下的增强分页组件

Django之CRM项目-表结构设计

2016传智SSH框架CRM项目（5天）笔记（2017年5月20日22:09:36）

[Python] Django框架入门5——静态文件、中间件、上传图片和分页

一 Django框架介绍——用pycharm创建Django项目

Python Django框架笔记（一）：安装及创建项目

Django框架的安装,项目创建

Python Django框架实现商城项目源码加设计文档和注释

框架----Django框架知识点整理