【银角大王——Django课程——分页显示功能实现】

添加假数据，然后演示分页功能

分页——功能实现

#取满足条件的前十条
models.PrettyNum.objects.filter(id=1)[0:10]

#从全部里面取0到10条
models.PrettyNum.objects.all()[0:10]

基于之前的靓号列表函数添加代码

完整列表函数代码如下：

#靓号列表
def pretty_list(request):
    #创建300行数据
    # for i in range(300):
    #        models.PrettyNum.objects.create(mobile="18118118118",price=10,level=1,status=1)



    #搜索时没有条件就传入空字典，也就相当于.all()
    data_dict={}

    #构件搜索
    #获取q值——名字为q的input框的值
    #get中参数——有值拿值，没有值传空
    search_data=request.GET.get('q',"")
    if search_data:
        # 为列表赋值
        data_dict["mobile__contains"] = search_data



    #根据用户想要访问的页码，计算出起止位置
    page=int(request.GET.get('page',1))
    page_size=10
    start=(page-1)*page_size
    end=page*page_size

    #将筛选的值通过filter(**data_dict)传递过去
    queryset=models.PrettyNum.objects.filter(**data_dict).order_by("-level")[start:end]

    #可以进行排序
    # models.PrettyNum.objects.all().order_by("-id")
    #按照等级来显示
    # queryset=models.PrettyNum.objects.all().order_by("-level")
    return render(request,'pretty_list.html',{"queryset":queryset,"search_data":search_data})

只显示10条——按照等级排序

页码list表样式——bootstrap样式

1. views.py——核心代码（不是整个函数代码——完整函数代码后面会给出）代码语句：

#定义一个空的列表来收集页面
    page_str_list=[]
    #循环生成li标签，并且传值——循环生成li标签，并且传值——循环生成li标签，并且传值
    for i in range(1,21):
        # ele='< li > < a href = "/pretty/list/?page=1" > 1 < / a > < / li >'
        ele ='<li><a href="/pretty/list/?page={}">{}</a></li>'.format(i,i)
        page_str_list.append(ele)
    #返还给前端页面的数据值
    #导入包from django.utils.safestring import mark_safe
    #page_string="".join(page_str_list)
    #将page_string包裹起来——使用mark_safe——表示是安全的
    #编译成HTML
    #我为啥包裹了显示不出来——显示出来了
    page_string = mark_safe("".join(page_str_list))


    #可以进行排序
    # models.PrettyNum.objects.all().order_by("-id")
    #按照等级来显示
    # queryset=models.PrettyNum.objects.all().order_by("-level")
    return render(request,'pretty_list.html',{"queryset":queryset,"search_data":search_data,"page_string":page_string})

2.html代码：

3.页面展示：

因为这篇文章是两天写的会有一些忘记

显示当前页面——前五页，后五页

代码修改（bug会后面解决）：

给当前页添加样式

效果如图：

代码修改：

页码bug更改——出现负数，没有数据的页码——设置极值

不设置极值时出现的情况——会出现负数，或者超出数据库总条页码数

设置极值后

• 小的极值
• 大的极值
  
  效果如图所示：——————当（当前页面）page小于5时，始终显示1-11页页码，不会再出现负值（最后一页也类似）
  

上一页，下一页，首页，尾页核心代码

效果图：

效果展示：

添加一个页面跳转框

HTML代码：

效果演示：

view.py——靓号展示函数全部代码：

#靓号列表
def pretty_list(request):
    #创建300行数据
    # for i in range(300):
    #        models.PrettyNum.objects.create(mobile="18118118118",price=10,level=1,status=1)



    #搜索时没有条件就传入空字典，也就相当于.all()
    data_dict={}

    #构件搜索
    #获取q值——名字为q的input框的值
    #get中参数——有值拿值，没有值传空
    search_data=request.GET.get('q',"")
    if search_data:
        # 为列表赋值
        data_dict["mobile__contains"] = search_data



    #根据用户想要访问的页码，计算出起止位置
    page=int(request.GET.get('page',1))
    page_size=10
    start=(page-1)*page_size
    end=page*page_size
    #数据总条数
    total_count= models.PrettyNum.objects.filter(**data_dict).order_by("-level").count()
    #将筛选的值通过filter(**data_dict)传递过去
    queryset=models.PrettyNum.objects.filter(**data_dict).order_by("-level")[start:end]

    #页码总数divmod()——结果为(商,余数)
    total_page_count,div = divmod(total_count,page_size)
    if div:
        total_page_count+=1
    #页码
    # < li > < a
    # href = "/pretty/list/?page=1" > 1 < / a > < / li >
    # < li > < a
    # href = "/pretty/list/?page=2" > 2 < / a > < / li >
    # < li > < a
    # href = "/pretty/list/?page=3" > 3 < / a > < / li >
    # < li > < a
    # href = "/pretty/list/?page=4" > 4 < / a > < / li >
    # < li > < a
    # href = "/pretty/list/?page=5" > 5 < / a > < / li >
    #定义一个空的列表来收集页面

    #计算出当前页前五页，后五页——计算出当前页前五页，后五页
    plus=5
    #数据量少的时候，全部页码显示
    if total_page_count <= 2*plus+1:
        start_page=1
        end_page=total_page_count
    #数据量多的时候，只显示当前页面的前五，后五页
    else:
        #当前页小于5时,开始固定，结尾为2*plus+1，显示十个页码——————————小的极值
        if page <= plus:
            start_page=1
            end_page=2*plus+1
        else:
            #当前页大于5
            #当前页+5大于total——————大的极值
            if (page+plus) >= total_page_count:
                #开始值应该为总页码向前推十个页码
                start_page=total_page_count-2*plus
                #结束值应该是总页码
                end_page=total_page_count
            #一般情况下的页码显示
            else:
                start_page=page-plus
                end_page=page+plus





    #页码
    page_str_list=[]

    #首页————————————————————————
    page_str_list.append('<li><a href="/pretty/list/?page={}">首页</a></li>'.format(1))

    #处理上一页——————处理上一页————————处理上一页
    #页码大于一时，才可以有上一页
    if page > 1:
        pre_page='<li><a href="/pretty/list/?page={}">上一页</a></li>'.format(page-1)
    #否则上一页标签一直指向第一页即可
    else:
        pre_page ='<li><a href="/pretty/list/?page={}">上一页</a></li>'.format(1)
    #将上一页标签加到页码数组中
    page_str_list.append(pre_page)

    #循环生成li标签，并且传值——循环生成li标签，并且传值——循环生成li标签，并且传值
    #range前取，后不取1
    for i in range(start_page, end_page+1 ):
    # for i in range(1,total_page_count+1):
        # ele='< li > < a href = "/pretty/list/?page=1" > 1 < / a > < / li >'
    #页面等于当前页——添加一个样式li class="active"
        if i== page:
            ele ='<li class="active"><a href="/pretty/list/?page={}">{}</a></li>'.format(i,i)
        #不是当前页就不加样式
        else:
            ele = '<li><a href="/pretty/list/?page={}">{}</a></li>'.format(i, i)
        page_str_list.append(ele)

    #下一页——放在页码循环后面
    #当前页码小于最后一页
    if page < total_page_count:
        next_page = '<li><a href="/pretty/list/?page={}">下一页</a></li>'.format(page + 1)
    # 否则，下一页标签一直指向最后页即可
    else:
        next_page = '<li><a href="/pretty/list/?page={}">下一页</a></li>'.format(total_page_count)
        # 将上一页标签加到页码数组中
    page_str_list.append(next_page)
    # 尾页————————————————————————
    page_str_list.append('<li><a href="/pretty/list/?page={}">尾页</a></li>'.format(total_page_count))


    #返还给前端页面的数据值
    #导入包from django.utils.safestring import mark_safe
    #page_string="".join(page_str_list)
    #将page_string包裹起来——使用mark_safe——表示是安全的
    #编译成HTML
    #我为啥包裹了显示不出来——显示出来了
    page_string = mark_safe("".join(page_str_list))


    #可以进行排序
    # models.PrettyNum.objects.all().order_by("-id")
    #按照等级来显示
    # queryset=models.PrettyNum.objects.all().order_by("-level")
    return render(request,'pretty_list.html',{"queryset":queryset,"search_data":search_data,"page_string":page_string})

HTML页面代码：

{% extends 'layout.html'%}
{% block content %}
<div class="container" xmlns="http://www.w3.org/1999/html">
      <div style="margin-bottom: 10px" class="clearfix">
<!--        新建用户按钮-->
            <a class="btn btn-success" href="/pretty/add/" >
                <span class="glyphicon glyphicon-plus-sign" aria-hidden="true"></span>
                新建靓号
            </a>
<!--            添加搜索框-添加搜索框-添加搜索框-->
            <div style="float:right ;width:300px;">

                <form method="get">
                            <div class="input-group">

<!--                                使得name="q",传递值-->
<!--                                给input框设置一个默认的值——value="{{search_data}}"——将用户输入的值保留在框内，不会因为跳转而消失-->
                                  <input type="text" name="q" class="form-control" placeholder="Search for..." value="{{search_data}}">
                                  <span class="input-group-btn">
                                        <button class="btn btn-default" type="submit">

                                            <span class="glyphicon glyphicon-search" aria-hidden="true"></span>
                                        </button>
                                  </span>

                             </div><!-- /input-group -->
                </form>
            </div>



      </div>


    <div class="panel panel-default">
      <!-- Default panel contents -->
      <div class="panel-heading">
        <span class="glyphicon glyphicon-list" aria-hidden="true"></span>
        靓号列表
      </div>
      <div class="panel-body">
        <p>欢迎进入到靓号管理页面，请安全操作！</p>
      </div>

      <!-- Table -->
      <table class="table table-bordered">
        <thead>
          <tr>
              <th>ID</th>
              <th>号码</th>
              <th>价格</th>
              <th>级别</th>
              <th>状态</th>
              <th>操作</th>
          </tr>
        </thead>
        <tbody>
<!--        数据库部门列表循环-->
          {% for obj in queryset %}
          <tr>
              <td>{{obj.id}}</td>
              <td>{{obj.mobile}}</td>
              <td>{{obj.price}}</td>
<!--              显示choices-->
              <td>{{obj.get_level_display}}</td>
              <td>{{obj.get_status_display}}</td>

              <td>
<!--                Django框架中传递参数的正则表达式-->
              <a class="btn btn-primary btn-xs"  href="/pretty/{{obj.id}}/edit/">编辑</a>
<!--                通过get请求传递参数跳转页面-->
              <a class="btn btn-danger btn-xs" href="/pretty/{{obj.id}}/delete/" >删除</a>
              </td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
<!--    分页代码###############################################3-->
     <ul class="pagination">
<!--        <li>-->
<!--          <a href="#" aria-label="Previous"><span aria-hidden="true">«</span>-->
<!--          </a>-->
<!--        </li>-->
<!--        <li><a href="/pretty/list/?page=1">1</a></li>-->
<!--        <li><a href="/pretty/list/?page=2">2</a></li>-->
<!--        <li><a href="/pretty/list/?page=3">3</a></li>-->
<!--        <li><a href="/pretty/list/?page=4">4</a></li>-->
<!--        <li><a href="/pretty/list/?page=5">5</a></li>-->
<!--        <li>-->
            {{page_string}}
<!--        <li>-->
<!--          <a href="#" aria-label="Next"><span aria-hidden="true">»</span>-->
<!--          </a>-->
<!--        </li>-->
      </ul>
      </br>
<!--    页码输入跳转-->
      <form method="get">
          <div class="input-group" style="width: 200px">
              <input type="text" name="page" class="form-comtrol" placeholder="页码">
              <span class="input-group-btn">
                  <button class="btn btn-default" type="submit">跳转</button>
              </span>

          </div>

      </form>


  </div>



{% endblock %}

作者今天写文章，脑子有点乱乱的，有不顺的地方，还请谅解！！！