一、自定义分页
分页功能在每个网站都是必要的,对于分页来说,其实就是根据用户的输入计算出应在数据库表中的起始位置。
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">«</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">»</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-前端循环生成页码
本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:Django框架-管理后台项目之分页实现 - Python技术站