django分页实现

截图

untils.py工具

def page_info_until(all,page,page_size=10):
    if page :
        page=int(page)
    else:
        page=1
    #共多少条条
    total=len(all)

    #多少页
    pages=int(total/page_size)
    if total%page_size:
        pages=int(total/page_size)+1
    #如果用户乱输入页码则显示最后一页
    if page>pages:
        page=pages
    if page<1:
        page=1

    endnum=page*page_size
    startnum=(page-1)*page_size

    if endnum>total:
        endnum=total
    #分页后list
    list=all[startnum:endnum]

    #页码list
    pages_li=range(1,pages+1)

    is_first_page=False
    has_pre_page=True
    pre_page=page-1
    if page==1:
        is_first_page=True
        has_pre_page=False



    is_last_page=False
    has_next_page=True
    next_page=page+1
    if page==pages:
        is_last_page=True
        has_next_page=False

    #对页码切片，只显示10个页码按钮
    pagelistart=0
    pageliend=0
    pagelisize=10
    pagelimidd=int(pagelisize/2)
    if page < pagelimidd:
        pagelistart=0
        if pages < pagelisize:
            pageliend=pages
        else:
            pageliend=pagelisize
    elif page > pages-pagelimidd:
        pageliend=pages
        if pages > pagelisize:
            pagelistart=pages-pagelisize
        else:
            pagelistart=0
    else:
        pagelistart=page-pagelimidd
        if pages < pagelisize:
            pageliend=pagelisize
        else:
            pageliend=page+pagelimidd

    page_li=pages_li[pagelistart:pageliend]


    return {'total':total,'list':list,'pages':pages,'page':page,'page_size':page_size,'page_li':page_li,'is_first_page':is_first_page,'is_last_page':is_last_page,'has_pre_page':has_pre_page,'has_next_page':has_next_page,'pre_page':pre_page,'next_page':next_page}

数据库查询views.py

from app01.untils import page_info_until

def  haoma_list(request):
    #搜索
        query_data={}
    mobile=request.GET.get('mobile')
    if mobile:
        query_data['mobile__contains']=mobile
    #等于id= 大于id__gt大于等于id__gte小于id__le小于等于id__le
    #字符串搜索包含id__contains，id__startwith以什么开始endwith以什么结束


        page =request.GET.get('page')

    #id升序，-id降序
        all=Haoma.objects.filter(**query_data).all().order_by('-id')
    page_info=page_info_until(all,page,page_size)

    return render(request,"haoma_list.html",{'query_data':query_data,'page_info':page_info})

page.html 

 <div class="btn-group">
    <p>共{{page_info.total}}条数据，共{{page_info.pages}}页，当前是第{{page_info.page}}页，一页显示{{page_info.page_size}}条</p>
    <input type="hidden" name="page" id="page">
    {% if not page_info.is_first_page   %}
    <button   type="button" class="btn btn-default page  pull-left" data-page="1">首页</button>
    {% endif %}
    {% if   page_info.has_pre_page   %}
    <button   type="button" class="btn btn-default page  pull-left" data-page="{{page_info.pre_page}}">上一页</button>
    {% endif %}
    {% for t in page_info.page_li %}
    {% if page_info.page != t %}   <button   type="button" class="btn btn-default page  pull-left" data-page="{{t}}">{{t}}</button>{% endif %}
    {% if page_info.page == t %}   <button   type="button" class="btn btn-success page  pull-left" data-page="{{t}}">{{t}}</button>{% endif %}
    {% endfor %}
    {% if   page_info.has_next_page   %}
    <button   type="button" class="btn btn-default page  pull-left" data-page="{{page_info.next_page}}">下一页</button>
    {% endif %}
    {% if not page_info.is_last_page   %}
    <button   type="button" class="btn btn-default page  pull-left" data-page="{{page_info.pages}}">尾页</button>
    {% endif %}

    <span  style="float:left;line-height:30px;margin-left: 20px;margin-right: 5px;" min="1">跳转第</span>
    <input   style="width: 50px;float:left;"  class="form-control" type="number" value="{{page_info.page}}"  id="gotopage" placeholder="请输入名称">
    <span  style="float:left;line-height:30px;margin-left: 5px;margin-right: 10px;" min="1">页</span>

    <button type="button" class="btn btn-default pull-left" id="gopagesub">确定</button>
</div>





<script>
    $('.page').click(function(){

        let p=$(this).attr('data-page')
        $('#page').val(p)
        $('#serachbtn').click();
    })

    $('#gopagesub').click(function(){
        let p=$('#gotopage').val()
        $('#page').val(p)
        $('#serachbtn').click();
    })
</script>

列表页面 include page.html

{% extends 'layout.html' %}
{% block content %}

<div>
    <form class="form-inline" role="form" method="get">
        <div class="form-group">
            <label class="sr-only">手机号</label>
            <input type="text" value="{{query_data.mobile__contains}}" name="mobile" class="form-control"
                   placeholder="请输入">
        </div>

        <button id="serachbtn" type="submit" class="btn btn-default">搜索</button>
        <a href="/haoma/toadd" class="btn btn-success pull-right">添加</a>


        <table class="table table-striped">
            <caption>号码管理</caption>
            <thead>
            <tr>
                <th>id</th>
                <th>号码</th>
                <th>价格</th>
                <th>级别</th>
                <th>状态</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody>
            {% for t in page_info.list %}
            <tr>
                <td>{{t.id}}</td>
                <td>{{t.mobile}}</td>
                <td>{{t.price}}</td>
                <td>{{t.get_level_display}}</td>
                <td>{{t.get_state_display}}</td>
                <td>
                    <a href="/haoma/toadd?id={{t.id}}" class="btn btn-success">编辑</a>
                    <a href="/haoma/del/{{t.id}}" class="btn btn-danger">删除</a>
                </td>
            </tr>
            {% endfor %}

            </tbody>
        </table>

        {% include "page.html" %}
    </form>
</div>
{% endblock %}

框架layout.html

{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="https://cdn.staticfile.net/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.net/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.net/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="   navbar navbar-default navbar-fixed-top" role="navigation">
    <div class="container">
        <div class="navbar-header">
            <a class="navbar-brand" href="#">员工管理系统</a>
        </div>
        <div>
            <ul class="nav navbar-nav">
                <li ><a href="/dep/list">部门管理</a></li>
                <li><a href="/users/list">用户管理</a></li>
                <li><a href="/haoma/list">手机号管理</a></li>

            </ul>
            <ul class="nav navbar-nav navbar-right">
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                        个人中心 <b class="caret"></b>
                    </a>
                    <ul class="dropdown-menu">
                        <li><a href="#">jmeter</a></li>
                        <li><a href="#">EJB</a></li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
</nav>

<div class="container" style="margin-top:70px;">
    {% block content %}  {% endblock %}
</div>

</body>
</html>