Django Paginator分页器的使用示例


Posted in Python onJune 23, 2021
# name: models.py
from django.db import models

class User(models.Model):
    id = models.AutoField(primary_key=True)
    username = models.CharField(max_length=32)
    password = models.CharField(max_length=32)

# 插入测试数据
import random
def index(request):
    for i in range(1,100):
        chars = []
        pasd = []
        for x in range(1,8):
            chars.append(random.choice('abcdefghijklmnopqrstuvwxyz'))
            pasd.append(random.choice('0987654321'))
        user = "".join(chars)
        pwd = "".join(pasd)
        models.User.objects.create(username=user, password=pwd)
    return HttpResponse("ok")
<!--name: page.html-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
     <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" >
</head>
<body>
<table class="table table-sm table-hover">
    <thead>
        <tr class="table-success">
            <th> 序号</th> <th> 用户名</th> <th> 用户密码</th>
        </tr>
    </thead>
    <tbody>
        {% for article in user_list %}
            <tr class="table-primary">
                <td>{{ article.id }}</td>
                <td>{{ article.username }}</td>
                <td>{{ article.password }}</td>
            </tr>
        {% endfor %}
    </tbody>
</table>
<nav class="d-flex justify-content-center" aria-label="Page navigation example">
    <ul class="pagination">
        <li class="page-item"><a class="page-link" href="./page?id=1" rel="external nofollow"  rel="external nofollow" >首页</a></li>
        {% if user_list.has_previous %}
            <li class="page-item"><a class="page-link" href="./page?id={{ user_list.previous_page_number }}" rel="external nofollow"  rel="external nofollow" >上一页</a></li>
        {% else %}
            <li class="page-item disabled"><a class="page-link" href="#" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" >上一页</a></li>
        {% endif %}

        {% for item in paginator.page_range %}
            {% if item == currentPage %}
                <li class="page-item active"><a class="page-link" href="./page?id={{ item }}" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" >{{ item }}</a></li>
            {% else %}
                <li class="page-item"><a class="page-link" href="./page?id={{ item }}" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" >{{ item }}</a></li>
            {% endif %}
        {% endfor %}

        {% if user_list.has_next %}
            <li class="page-item"><a class="page-link" href="./page?id={{ user_list.next_page_number }}" rel="external nofollow"  rel="external nofollow" >下一页</a></li>
        {% else %}
            <li class="page-item disabled"><a class="page-link" href="#" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" >下一页</a></li>
        {% endif %}
        <li class="page-item"><a class="page-link" href="./page?id={{ paginator.num_pages }}" rel="external nofollow"  rel="external nofollow" >尾页</a></li>
    </ul>
</nav>

<div style="text-align: center;" class="alert alert-dark">
   统计: {{ currentPage }}/{{ paginator.num_pages }} 共查询到:{{ paginator.count }} 条数据 页码列表:{{ paginator.page_range }}
</div>
</body>
</html>
# name: views.py
from django.shortcuts import render,HttpResponse
from MyWeb import models
from django.core.paginator import Paginator, EmptyPage, PageNotAnInteger

def page(request):
    user = models.User.objects.all()
    paginator = Paginator(user, 10)
    currentPage = int(request.GET.get("id",1))
    try:
        user_list = paginator.page(currentPage)
    except PageNotAnInteger:
        user_list = paginator.page(1)
    except:
        user_list = paginator.page(paginator.num_pages)

    return render(request,"page.html",{"user_list":user_list,
                                       "paginator":paginator,
                                       "currentPage":currentPage})
# name: urls.py
from MyWeb import views

urlpatterns = [
    path('admin/', admin.site.urls),
    path('page',views.page)
]

Django Paginator分页器的使用示例

上方的分页代码还有一个不足之处,当我们的页码数量过多时,会全部展示出来,整个页面都是很不美观,我们直接在上方代码上稍加修改一下试试.

# name: views.py
from django.shortcuts import render,HttpResponse
from MyWeb import models
from django.core.paginator import Paginator, EmptyPage, PageNotAnInteger

def page(request):
    user = models.User.objects.all()
    paginator = Paginator(user, 10)
    currentPage = int(request.GET.get("id",1))

    if paginator.num_pages > 15:
        if currentPage-5 < 1:
            pageRange = range(1,11)
        elif currentPage+5 > paginator.num_pages:
            pageRange = range(currentPage-5,paginator.num_pages)
        else:
            pageRange = range(currentPage-5,currentPage+5)
    else:
        pageRange = paginator.page_range

    try:
        user_list = paginator.page(currentPage)
    except PageNotAnInteger:
        user_list = paginator.page(1)
    except:
        user_list = paginator.page(paginator.num_pages)

    return render(request,"page.html",{"user_list":user_list,
                                       "paginator":paginator,
                                       "page_range":pageRange,        # 此处自定义一个分页段
                                       "currentPage":currentPage})

前端分页代码只需要将paginator.page_range改为page_range其他地方不需要动.

{% for item in page_range %}
            {% if item == currentPage %}
                <li class="page-item active"><a class="page-link" href="./page?id={{ item }}" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" >{{ item }}</a></li>
            {% else %}
                <li class="page-item"><a class="page-link" href="./page?id={{ item }}" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" >{{ item }}</a></li>
            {% endif %}
        {% endfor %}

这样,无论有多少页面,都能够保证只显示10页。

分页后添加删除功能

1.删除功能的实现,很简单,只需要定位得到指定的tr上,取出里面的id号码,并发送给后端,执行sql删除就完事了。

<head>
    <meta charset="UTF-8">
    <title>Title</title>
     <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" >
    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
</head>
<body>

<script type="text/javascript">
    $(document).ready(function(){
      $("#but1").click(function(){
            var obj = $("#tab");          // 定位到table表格
            var check = $("table input[type=checkbox]:checked");
            check.each(function(){        // 遍历节点
                var row = $(this).parent("td").parent("tr");  // 获取选中行
                var id = row.find("[name='uid']").html();     // 取出第一行的属性
                var name = row.find("[name='user']").html();
                alert("选中行的ID: " + id + "名字: " + name)
            });
      });
    });
</script>

<table id="tab" class="table table-sm table-hover">
    <thead>
        <tr class="table-success">
            <th>选择</th><th> 序号</th> <th> 用户名</th> <th> 用户密码</th>
        </tr>
    </thead>
    <tbody>
        {% for article in user_list %}
            <tr class="table-primary">
                <td> <input type="checkbox"></td>
                <td name="uid">{{ article.id }}</td>
                <td name="user">{{ article.username }}</td>
                <td>{{ article.password }}</td>
            </tr>
        {% endfor %}
    </tbody>
</table>
.................

<div>
    <button id="but1" class="btn btn-danger" onclick="check()">删除指定行</button>
</div>

Django Paginator分页器的使用示例

实现模态框编辑内容

点击选中行,然后弹出模态框,并自动的获取到该行数据,编辑好以后直接用ajax发送post请求到后端处理即可。

<head>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" >
    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>

<button type="button" id="but1" class="btn btn-success" data-toggle="modal" data-target="#staticBackdrop">弹框</button>

<script type="text/javascript">
    $(document).ready(function(){
      $("#but1").click(function(){
            var obj = $("#tab");
            var edit = $("table input[type=checkbox]:checked");
            edit.each(function(){
                var row = $(this).parent("td").parent("tr");
                var id = row.find("[name='uid']").html();
                var name = row.find("[name='user']").html();
                var email = row.find("[name='email']").html();
                $("#edit_id").val(id);
                $("#edit_name").val(name);
                $("#edit_email").val(email);
            });
      });
    });
</script>
<body>
<table id="tab" border="1" cellspacing="0">
    <thead>
        <tr>
            <th>选择</th><th>用户ID</th><th>用户名称</th><th>用户邮箱</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td> <input type="checkbox"></td>
            <td name="uid"> 1001</td>
            <td name="user"> lyshark</td>
            <td name="email"> lyshark@123.com</td>
        </tr>
        <tr>
            <td> <input type="checkbox"></td>
            <td name="uid"> 1002</td>
            <td name="user"> 搞事情</td>
            <td name="email"> lyshark@123.com</td>
        </tr>
    </tbody>
</table>

<div class="modal fade" id="staticBackdrop" data-backdrop="static" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="staticBackdropLabel">编辑模式</h5>
      </div>
      <div class="modal-body">
        <!--主体部分-->
        <div class="form-group row">
            <label class="col-sm-2 col-form-label">用户ID:</label>
            <div class="col-sm-10">
              <input type="text" id="edit_id" class="form-control">
            </div>

            <label class="col-sm-2 col-form-label">名称:</label>
            <div class="col-sm-10">
              <input type="text" id="edit_name" class="form-control">
            </div>

            <label class="col-sm-2 col-form-label">邮箱:</label>
            <div class="col-sm-10">
              <input type="text" id="edit_email" class="form-control">
            </div>
        </div>
      </div>

      <!--尾部内容-->
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
        <button type="button" class="btn btn-primary">提交数据</button>
      </div>
    </div>
  </div>
</body>

Django Paginator分页器的使用示例

完整代码笔记

利用BootStrap框架实现分页: 通过使用bootstrap框架,并配合Django自带的分页组件即可实现简单的分页效果.

# name: models.py
from django.db import models

class User(models.Model):
    id = models.AutoField(primary_key=True)
    username = models.CharField(max_length=32)
    password = models.CharField(max_length=32)

# 插入测试数据
import random
def index(request):
    for i in range(1,1000):
        chars = []
        pasd = []
        for x in range(1,8):
            chars.append(random.choice('abcdefghijklmnopqrstuvwxyz'))
            pasd.append(random.choice('0987654321'))
        user = "".join(chars)
        pwd = "".join(pasd)
        models.User.objects.create(username=user, password=pwd)
    return HttpResponse("ok")
<!--name: page.html-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
     <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" >
</head>
<body>
<table class="table table-sm table-hover">
    <thead>
        <tr class="table-success">
            <th> 序号</th> <th> 用户名</th> <th> 用户密码</th>
        </tr>
    </thead>
    <tbody>
        {% for article in user_list %}
            <tr class="table-primary">
                <td>{{ article.id }}</td>
                <td>{{ article.username }}</td>
                <td>{{ article.password }}</td>
            </tr>
        {% endfor %}
    </tbody>
</table>
<nav class="d-flex justify-content-center" aria-label="Page navigation example">
    <ul class="pagination">
        <li class="page-item"><a class="page-link" href="./page?id=1" rel="external nofollow"  rel="external nofollow" >首页</a></li>
        {% if user_list.has_previous %}
            <li class="page-item"><a class="page-link" href="./page?id={{ user_list.previous_page_number }}" rel="external nofollow"  rel="external nofollow" >上一页</a></li>
        {% else %}
            <li class="page-item disabled"><a class="page-link" href="#" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" >上一页</a></li>
        {% endif %}

        {% for item in paginator.page_range %}
            {% if item == currentPage %}
                <li class="page-item active"><a class="page-link" href="./page?id={{ item }}" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" >{{ item }}</a></li>
            {% else %}
                <li class="page-item"><a class="page-link" href="./page?id={{ item }}" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" >{{ item }}</a></li>
            {% endif %}
        {% endfor %}

        {% if user_list.has_next %}
            <li class="page-item"><a class="page-link" href="./page?id={{ user_list.next_page_number }}" rel="external nofollow"  rel="external nofollow" >下一页</a></li>
        {% else %}
            <li class="page-item disabled"><a class="page-link" href="#" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" >下一页</a></li>
        {% endif %}
        <li class="page-item"><a class="page-link" href="./page?id={{ paginator.num_pages }}" rel="external nofollow"  rel="external nofollow" >尾页</a></li>
    </ul>
</nav>

<div style="text-align: center;" class="alert alert-dark">
   统计: {{ currentPage }}/{{ paginator.num_pages }} 共查询到:{{ paginator.count }} 条数据 页码列表:{{ paginator.page_range }}
</div>
</body>
</html>
# name: views.py
from django.shortcuts import render,HttpResponse
from MyWeb import models
from django.core.paginator import Paginator, EmptyPage, PageNotAnInteger

def page(request):
    user = models.User.objects.all()
    paginator = Paginator(user, 10)
    currentPage = int(request.GET.get("id",1))
    try:
        user_list = paginator.page(currentPage)
    except PageNotAnInteger:
        user_list = paginator.page(1)
    except:
        user_list = paginator.page(paginator.num_pages)

    return render(request,"page.html",{"user_list":user_list,
                                       "paginator":paginator,
                                       "currentPage":currentPage})
# name: urls.py
from MyWeb import views

urlpatterns = [
    path('admin/', admin.site.urls),
    path('page',views.page)
]

上方的分页代码还有一个不足之处,当我们页面中的页码数量过多时,默认会将页码全部展示出来,整个页面看上去很不美观,我们可以直接在上方分页代码上稍加修改即可,如下代码.

# name: views.py
from django.shortcuts import render,HttpResponse
from MyWeb import models
from django.core.paginator import Paginator, EmptyPage, PageNotAnInteger

def page(request):
    user = models.User.objects.all()
    paginator = Paginator(user, 10)
    currentPage = int(request.GET.get("id",1))

    if paginator.num_pages > 15:
        if currentPage-5 < 1:
            pageRange = range(1,11)
        elif currentPage+5 > paginator.num_pages:
            pageRange = range(currentPage-5,paginator.num_pages)
        else:
            pageRange = range(currentPage-5,currentPage+5)
    else:
        pageRange = paginator.page_range

    try:
        user_list = paginator.page(currentPage)
    except PageNotAnInteger:
        user_list = paginator.page(1)
    except:
        user_list = paginator.page(paginator.num_pages)

    return render(request,"page.html",{"user_list":user_list,
                                       "paginator":paginator,
                                       "page_range":pageRange,        # 此处自定义一个分页段
                                       "currentPage":currentPage})

前端分页代码只需要将paginator.page_range改为page_range其他地方不需要动.

{% for item in page_range %}
            {% if item == currentPage %}
                <li class="page-item active"><a class="page-link" href="./page?id={{ item }}" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" >{{ item }}</a></li>
            {% else %}
                <li class="page-item"><a class="page-link" href="./page?id={{ item }}" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" >{{ item }}</a></li>
            {% endif %}
        {% endfor %}

利用layui框架实现分页:

layui是一个完整的前端开发框架,利用它可以快速构建分页应用,比BootStrap更加灵活.

# models.py
from django.db import models

class HostDB(models.Model):
    id = models.AutoField(primary_key=True)
    hostname = models.CharField(max_length=64)
    hostaddr = models.CharField(max_length=64)
    hostmode = models.CharField(max_length=64)
<!--name: index.html-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="https://lyshark.com/cdn/layui/css/layui.css" rel="external nofollow"  rel="external nofollow" >
    <script type="text/javascript" src="https://lyshark.com/cdn/layui/layui.js"></script>
</head>
<body>
<table class="layui-hide" id="demo"></table>

    <script type="text/javascript">
    layui.use('table', function(){
      var table = layui.table;
      table.render({
          elem: '#demo',
          url:'/get_page',
          method:'get',
          toolbar: '#toolbarDemo'         // 显示工具条
          ,request: {
                  pageName: 'pageIndex',  // 页码的参数名称,默认:page
                  limitName: 'pageSize'   // 每页数据量的参数名,默认:limit
          }
          ,response: {
                  statusName: 'code',     // 规定数据状态的字段名称,默认:code
                  statusCode: 0,          // 规定成功的状态码,默认:0
                  msgName: 'msg',         // 规定状态信息的字段名称,默认:msg
                  countName: 'DataCount', // 规定数据总数的字段名称,默认:count
                  dataName: 'data'        // 规定数据列表的字段名称,默认:data
          }
        ,cols: [[
          {type: 'checkbox', fixed: 'left'},
          {field:'id', title:'主机ID', width:100, sort: true},
          {field:'hostname', title:'主机名称', width:120},
          {field:'hostaddr', title:'主机地址', width:120},
          {field:'hostmode', title:'主机组', width:120},
        ]]
        ,page: {
            layout: ['limit', 'count', 'prev', 'page', 'next', 'skip'],     // 自定义分页布局
            curr: 1,      // 设置默认起始页1
            groups: 10,   //只显示10个连续页码,就是说显示10个可见页其他的省略
            first: false, // 不显示首页
            last: false   // 不显示尾页
        },
        limit: 5,
        limits: [5,10,15,20,25]
      });
    });
    </script>
</body>
</html>
# views.py

from django.shortcuts import render,HttpResponse
from django.core.paginator import Paginator,EmptyPage,PageNotAnInteger
from MyWeb import models
import json

def index(request):
    return render(request,"index.html")

def get_page(request):
    data = models.HostDB.objects.all()
    dataCount = data.count()
    pageIndex = request.GET.get("pageIndex")
    pageSize = request.GET.get("pageSize")
    print("当前索引:{} 当前大小:{}".format(pageIndex,pageSize))
    print("所有记录:{} 数据总条数:{}".format(data,dataCount))

    # 将数据组装成字典后放入data_list列表
    data_list,ref_data = [],[]
    for item in data:
        dict = { 'id':item.id , 'hostname':item.hostname, 'hostaddr':item.hostaddr, 'hostmode':item.hostmode }
        data_list.append(dict)

    # 使用分页器分页
    pageInator = Paginator(data_list,pageSize)
    context = pageInator.page(pageIndex)
    for item in context:
        ref_data.append(item)
    # 返回分页格式
    data = { "code": 0,"msg": "ok","DataCount": dataCount,"data": ref_data }
    return HttpResponse(json.dumps(data))
# name: url.py
from MyWeb import views

urlpatterns = [
    path('admin/', admin.site.urls),
    path('',views.index),
    path('get_page/',views.get_page)
]

layui实现完整表格分页:

通过使用layui框架完成的一个相对完整的表格分页,可用于生产环境.

<!--name: index.html-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="https://lyshark.com/cdn/layui/css/layui.css" rel="external nofollow"  rel="external nofollow" >
    <script type="text/javascript" src="https://lyshark.com/cdn/jquery/jquery3.js"></script>
    <script type="text/javascript" src="https://lyshark.com/cdn/layui/layui.js"></script>
</head>
<body>
<div class="demoTable">
    <div class="layui-inline">
        <input class="layui-input" name="id" id="demoReload" autocomplete="off">
    </div>
        <button class="layui-btn" data-type="reload">搜索</button>
</div>

<script type="text/html" id="barDemo">
  <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>

<table class="layui-hide" id="demo" lay-filter="test"></table>

    <script type="text/javascript">
    layui.use('table', function(){
      var table = layui.table;
      table.render({
          elem: '#demo',
          id: 'testReload',
          url:'/get_page',
          method:'get'
          ,request: {
                  pageName: 'pageIndex',  // 页码的参数名称,默认:page
                  limitName: 'pageSize'   // 每页数据量的参数名,默认:limit
          }
          ,response: {
                  statusName: 'code',     // 规定数据状态的字段名称,默认:code
                  statusCode: 0,          // 规定成功的状态码,默认:0
                  msgName: 'msg',         // 规定状态信息的字段名称,默认:msg
                  countName: 'DataCount', // 规定数据总数的字段名称,默认:count
                  dataName: 'data'        // 规定数据列表的字段名称,默认:data
          }
        ,cols: [[
          {type: 'checkbox', fixed: 'left'},
          {field:'id', title:'主机ID', width:100, sort: true},
          {field:'hostname', title:'主机名称', width:120},
          {field:'hostaddr', title:'主机地址', width:120},
          {field:'hostmode', title:'主机组', width:120},
          {fixed: 'right', title:'操作', toolbar: '#barDemo', width:120}
        ]]
        ,page: {
            layout: ['limit', 'count', 'prev', 'page', 'next', 'skip'],     // 自定义分页布局
            curr: 1,      // 设置默认起始页1
            groups: 10,   // 只显示10个连续页码,就是说显示10个可见页其他的省略
            first: false, // 不显示首页
            last: false   // 不显示尾页
        },
        limit: 5,
        limits: [5,10,15,20,25]
      });
// ------------------------------------------------------------------
// 监听行工具事件:也就是编辑与删除的处理事件
      table.on('tool(test)', function(obj){
        var data = obj.data;
        if(obj.event === 'del'){
          layer.confirm('真的要删除本行数据吗 ?', {icon: 3,anim: 2}, function(index){
            // console.log("待删除ID: " + obj.data['id']);
           $.ajax({
               url:"/delete_page/",
               type:"get",
               data: {"id":obj.data['id']},
               success:function (recv) {
                   layer.msg("删除完成了..", {icon: 6});
               }
           });
            obj.del();
            layer.close(index);
          });
        } else if(obj.event === 'edit'){
          layer.prompt({ formType:2, title: "编辑表格",btn:['修改数据','关闭'],anim: 4,
              content:`<div>
                            主机序号: <input type="text" style='display:inline-block' id="id"><br><br>
                            主机名称: <input type="text" style='display:inline-block' id="hostname"><br><br>
                            主机地址: <input type="text" style='display:inline-block' id="hostaddr"><br><br>
                            主机属组: <input type="text" style='display:inline-block' id="hostmode"><br><br>
                       </div>`,
              yes:function (index,layero)
              {
                  console.log("点击yes触发事件:" + index);
                  var id = $("#id").val();
                  var hostname = $("#hostname").val();
                  var hostaddr = $("#hostaddr").val();
                  var hostmode = $("#hostmode").val();
                  $.ajax({
                      url: "/update_page",
                      type: "get",
                      data: {"id": id,
                              "hostname": hostname,
                              "hostaddr": hostaddr,
                              "hostmode": hostmode },
                      success:function (recv) {
                        // 修改完成后,本地直接更新数据,这样就无需刷新一次了
                          obj.update({
                              hostname: hostname,
                              hostaddr: hostaddr,
                              hostmode: hostmode
                          });
                          layer.msg("修改完成了..", {icon: 6});
                          layer.close(index);
                      }
                  });
              }
          });
              $("#id").val(data.id);
              $("#hostname").val(data.hostname);
              $("#hostaddr").val(data.hostaddr);
              $("#hostmode").val(data.hostmode);
        }
      });

        // 搜索后的重载,也就是找到数据以后直接更新
      var $ = layui.$, active = {
        reload: function(){
          var demoReload = $('#demoReload');
          //执行重载
          table.reload('testReload', {
            url:"/search_page",
            page: {
              curr: 1,
              limits: [1]
            }
            ,where: {
                hostname: demoReload.val()
            }
          });
        }
      };
    // ---------------------------------------------------------
    // 绑定搜索事件
      $('.demoTable .layui-btn').on('click', function(){
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
          });
    });
    </script>
</body>
</html>
# name:views.py

from django.shortcuts import render,HttpResponse
from django.core.paginator import Paginator,EmptyPage,PageNotAnInteger
from MyWeb import models
import json

def index(request):
    return render(request,"index.html")

def get_page(request):
    data = models.HostDB.objects.all()
    dataCount = data.count()
    pageIndex = request.GET.get("pageIndex")
    pageSize = request.GET.get("pageSize")
    print("当前索引:{} 当前大小:{}".format(pageIndex,pageSize))
    print("所有记录:{} 数据总条数:{}".format(data,dataCount))

    list = []
    res = []
    for item in data:
        dict = {}
        dict['id'] = item.id
        dict['hostname'] = item.hostname
        dict['hostaddr'] = item.hostaddr
        dict['hostmode'] = item.hostmode
        list.append(dict)

    pageInator = Paginator(list,pageSize)
    context = pageInator.page(pageIndex)
    for item in context:
        res.append(item)
    data = { "code": 0,"msg": "ok","DataCount": dataCount,"data": res }
    return HttpResponse(json.dumps(data))

def search_page(request):
    sql = request.GET.get("hostname")
    data = models.HostDB.objects.all().filter(hostname=sql)
    list = []
    for item in data:
        dict = {}
        dict['id'] = item.id
        dict['hostname'] = item.hostname
        dict['hostaddr'] = item.hostaddr
        dict['hostmode'] = item.hostmode
        list.append(dict)

    data = { "code": 0,"msg": "ok","DataCount": 1,"data": list }
    return HttpResponse(json.dumps(data))

def delete_page(request):
    get_id = request.GET.get("id")
    models.HostDB.objects.filter(id=get_id).delete()
    return render(request,"index.html")

def update_page(request):
    get_id = request.GET.get("id")
    get_hostname = request.GET.get("hostname")
    get_hostaddr = request.GET.get("hostaddr")
    get_hostmode = request.GET.get("hostmode")

    print(get_hostmode)
    obj = models.HostDB.objects.get(id=get_id)
    obj.hostname = get_hostname
    obj.hostaddr = get_hostaddr
    obj.hostmode = get_hostmode
    obj.save()
    return render(request,"index.html")
# name: urls.py

from MyWeb import views

urlpatterns = [
    path('',views.index),
    path('get_page/',views.get_page),
    path('search_page/',views.search_page),
    path('delete_page/',views.delete_page),
    path("update_page/",views.update_page)
]

自己实现分页:

转载代码,仅用于收藏。

from urllib.parse import urlencode

class Pagination(object):
    def __init__(self,current_page,total_count,base_url,params,per_page_count=10,max_pager_count=10):
        try:
            current_page = int(current_page)
        except Exception as e:
            current_page = 1
        if current_page <= 1:
            current_page = 1
        self.current_page = current_page
        # 数据总条数
        self.total_count = total_count

        # 每页显示10条数据
        self.per_page_count = per_page_count

        # 页面上应该显示的最大页码
        max_page_num, div = divmod(total_count, per_page_count)
        if div:
            max_page_num += 1
        self.max_page_num = max_page_num

        # 页面上默认显示11个页码(当前页在中间)
        self.max_pager_count = max_pager_count
        self.half_max_pager_count = int((max_pager_count - 1) / 2)

        # URL前缀
        self.base_url = base_url

        # request.GET
        import copy
        params = copy.deepcopy(params)
        # params._mutable = True
        get_dict = params.to_dict()
        # 包含当前列表页面所有的搜/索条件
        self.params = get_dict

    @property
    def start(self):
        return (self.current_page - 1) * self.per_page_count

    @property
    def end(self):
        return self.current_page * self.per_page_count

    def page_html(self):
        # 如果总页数 <= 11
        if self.max_page_num <= self.max_pager_count:
            pager_start = 1
            pager_end = self.max_page_num
        # 如果总页数 > 11
        else:
            # 如果当前页 <= 5
            if self.current_page <= self.half_max_pager_count:
                pager_start = 1
                pager_end = self.max_pager_count
            else:
                # 当前页 + 5 > 总页码
                if (self.current_page + self.half_max_pager_count) > self.max_page_num:
                    pager_end = self.max_page_num
                    pager_start = self.max_page_num - self.max_pager_count + 1   #倒这数11个
                else:
                    pager_start = self.current_page - self.half_max_pager_count
                    pager_end = self.current_page + self.half_max_pager_count

        page_html_list = []
        # {source:[2,], status:[2], gender:[2],consultant:[1],page:[1]}
        # 首页
        self.params['page'] = 1
        first_page = '首页' % (self.base_url,urlencode(self.params),)
        page_html_list.append(first_page)
        # 上一页
        self.params["page"] = self.current_page - 1
        if self.params["page"] <= 1:
            pervious_page = '上一页' % (self.base_url, urlencode(self.params))
        else:
            pervious_page = '上一页' % ( self.base_url, urlencode(self.params))
        page_html_list.append(pervious_page)
        # 中间页码
        for i in range(pager_start, pager_end + 1):
            self.params['page'] = i
            if i == self.current_page:
                temp = '%s' % (self.base_url,urlencode(self.params), i,)
            else:
                temp = '%s' % (self.base_url,urlencode(self.params), i,)
            page_html_list.append(temp)

        # 下一页
        self.params["page"] = self.current_page + 1
        if self.params["page"] > self.max_page_num:
            self.params["page"] = self.current_page
            next_page = '下一页' % (self.base_url, urlencode(self.params))
        else:
            next_page = '下一页' % (self.base_url, urlencode(self.params))
        page_html_list.append(next_page)

        # 尾页
        self.params['page'] = self.max_page_num
        last_page = '尾页' % (self.base_url, urlencode(self.params),)
        page_html_list.append(last_page)

        return ''.join(page_html_list)

文章出处:https://www.cnblogs.com/lyshark

以上就是Django Paginator分页器的使用示例的详细内容,更多关于Django Paginator分页器的使用的资料请关注三水点靠木其它相关文章!

Python 相关文章推荐
Python实现的数据结构与算法之链表详解
Apr 22 Python
Python的Django框架中URLconf相关的一些技巧整理
Jul 18 Python
在Python中使用正则表达式的方法
Aug 13 Python
快速查询Python文档方法分享
Dec 27 Python
Python实现上下班抢个顺风单脚本
Feb 07 Python
numpy 进行数组拼接,分别在行和列上合并的实例
May 08 Python
python创建ArcGIS shape文件的实现
Dec 06 Python
python递归函数求n的阶乘,优缺点及递归次数设置方式
Apr 02 Python
浅谈Python中os模块及shutil模块的常规操作
Apr 03 Python
Opencv python 图片生成视频的方法示例
Nov 18 Python
基于Python实现对比Exce的工具
Apr 07 Python
python游戏开发Pygame框架
Apr 22 Python
python随机打印成绩排名表
教你怎么用Python selenium操作浏览器对象的基础API
Jun 23 #Python
Python一些基本的图像操作和处理总结
Python使用openpyxl批量处理数据
浅谈Python实现opencv之图片色素的数值运算和逻辑运算
opencv-python图像配准(匹配和叠加)的实现
Python初学者必备的文件读写指南
Jun 23 #Python
You might like
PHP实现基本留言板功能原理与步骤详解
2020/03/26 PHP
关于Blog顶部的滚动导航条代码
2006/09/25 Javascript
兼容多浏览器的iframe自适应高度(ie8 、谷歌浏览器4.0和 firefox3.5.3)
2009/11/04 Javascript
Javascript实现滑块滑动改变值的实现代码
2013/04/12 Javascript
jquery 选取方法都有哪些
2014/05/18 Javascript
Bootstrap每天必学之导航组件
2016/04/25 Javascript
浅谈JavaScript 标准对象
2016/06/02 Javascript
jQuery插件编写步骤详解
2016/06/03 Javascript
angularjs使用gulp-uglify压缩后执行报错的解决方法
2018/03/07 Javascript
JS实现前端页面的搜索功能
2018/06/12 Javascript
JS实现移动端触屏拖拽功能
2018/07/31 Javascript
用Fundebug插件记录网络请求异常的方法
2019/02/21 Javascript
Vue自定义全局Toast和Loading的实例详解
2019/04/18 Javascript
ES6的解构赋值实例详解
2019/05/06 Javascript
如何让Nodejs支持H5 History模式(connect-history-api-fallback源码分析)
2019/05/30 NodeJs
JS实现网页烟花动画效果
2020/03/10 Javascript
jQuery实现简单评论功能
2020/08/19 jQuery
vue elementui tree 任意级别拖拽功能代码
2020/08/31 Javascript
Python实现桶排序与快速排序算法结合应用示例
2017/11/22 Python
解决每次打开pycharm直接进入项目的问题
2018/10/28 Python
Python字典常见操作实例小结【定义、添加、删除、遍历】
2019/10/25 Python
python 实现一个反向单位矩阵示例
2019/11/29 Python
python pprint模块中print()和pprint()两者的区别
2020/02/10 Python
解决jupyter notebook打不开无反应 浏览器未启动的问题
2020/04/10 Python
Python基于wordcloud及jieba实现中国地图词云图
2020/06/09 Python
Python 实现一个计时器
2020/07/28 Python
python绘图pyecharts+pandas的使用详解
2020/12/13 Python
HTML利用九宫格原理进行网页布局
2020/03/13 HTML / CSS
求职信内容考虑哪几点
2013/10/05 职场文书
四年大学生活的个人自我评价
2013/12/11 职场文书
社团2014年植树节活动总结
2014/03/11 职场文书
2015年班级元旦晚会活动总结
2014/11/28 职场文书
五四青年节比赛演讲稿
2015/03/18 职场文书
大学生入党自传2015
2015/06/26 职场文书
苦儿流浪记读书笔记
2015/07/01 职场文书
安装配置mysql及Navicat prenium的详细流程
2021/06/10 MySQL