首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Python

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分页器的使用的资料请关注三水点靠木其它相关文章！

Django Paginator分页器的使用示例

- Author -

lyshark

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Python 相关文章推荐
python读取浮点数和读取文本文件示例
May 06 Python
Python基础语法(Python基础知识点)
Feb 28 Python
python批量修改图片后缀的方法(png到jpg)
Oct 25 Python
Python 限制线程的最大数量的方法(Semaphore)
Feb 22 Python
Pyqt清空某一个QTreeewidgetItem下的所有分支方法
Jun 17 Python
基于sklearn实现Bagging算法（python）
Jul 11 Python
python爬虫解决验证码的思路及示例
Aug 01 Python
python 接口实现 供第三方调用的例子
Aug 13 Python
利用python中的matplotlib打印混淆矩阵实例
Jun 16 Python
python中线程和进程有何区别
Jun 17 Python
如何使用Cython对python代码进行加密
Jul 08 Python
Python自动巡检H3C交换机实现过程解析
Aug 14 Python
python随机打印成绩排名表
教你怎么用Python selenium操作浏览器对象的基础API
Jun 23 #Python
Python一些基本的图像操作和处理总结
Python使用openpyxl批量处理数据
浅谈Python实现opencv之图片色素的数值运算和逻辑运算
opencv-python图像配准(匹配和叠加)的实现
Python初学者必备的文件读写指南
Jun 23 #Python
无线电(12) 短波(8) 怀旧期刊(1) 烈阳天道(2) 中学科技(1) 下载(1) 超神学院(1) 雄兵连(3) 广播(8) 萨拉雷(1)
You might like
php获取post中的json数据的实现方法
2011/06/08 PHP
对于ThinkPHP框架早期版本的一个SQL注入漏洞详细分析
2014/07/04 PHP
微信自定义菜单的处理开发示例
2015/04/16 PHP
通过PHP自带的服务器来查看正则匹配结果的方法
2015/12/24 PHP
php利用header函数下载各种文件
2016/08/24 PHP
基于JavaScript实现仿京东图片轮播效果
2015/11/06 Javascript
Bootstrap carousel轮转图的使用实例详解
2016/05/17 Javascript
Es6 写的文件import 起来解决方案详解
2016/12/13 Javascript
谈谈JavaScript中浏览器兼容问题的写法小议
2016/12/17 Javascript
jQuery实现可编辑表格并生成json结果(实例代码)
2017/07/19 jQuery
jQuery中库的引用方法
2018/01/06 jQuery
vue-router3.0版本中 router.push 不能刷新页面的问题
2018/05/10 Javascript
ES6模板字符串和标签模板的应用实例分析
2019/06/25 Javascript
vue 解决遍历对象显示的顺序不对问题
2019/11/07 Javascript
nuxt配置通过指定IP和端口访问的实现
2020/01/08 Javascript
[01:03:50]DOTA2-DPC中国联赛 正赛 CDEC vs DLG BO3 第二场 2月7日
2021/03/11 DOTA
[07:09]DOTA2-DPC中国联赛 正赛 Ehome vs Elephant 选手采访
2021/03/11 DOTA
Python 的描述符 descriptor详解
2016/02/27 Python
python实现简单的单变量线性回归方法
2018/11/08 Python
值得收藏，Python 开发中的高级技巧
2018/11/23 Python
40个你可能不知道的Python技巧附代码
2020/01/29 Python
Python新手学习raise用法
2020/06/03 Python
tensorflow 动态获取 BatchSzie 的大小实例
2020/06/30 Python
详解Python高阶函数
2020/08/15 Python
python属于哪种语言
2020/08/16 Python
CSS3中的常用选择器使用示例整理
2016/06/13 HTML / CSS
what is the difference between ext2 and ext3
2013/11/03 面试题
致垒球运动员加油稿
2014/02/16 职场文书
社区健康教育实施方案
2014/03/18 职场文书
反对邪教标语
2014/06/30 职场文书
员工安全责任书范本
2014/07/24 职场文书
会计试用期自我评价怎么写
2014/09/18 职场文书
二年级学生期末评语
2014/12/26 职场文书
人事任命通知
2015/04/20 职场文书
运动会闭幕式通讯稿
2015/07/18 职场文书
《孙子兵法》：欲成大事者，需读懂这些致胜策略
2019/08/23 职场文书