网络编程
位置:首页>> 网络编程>> Python编程>> Django Paginator分页器的使用示例

Django Paginator分页器的使用示例

作者:lyshark  发布时间:2021-10-25 02:36:39 

标签:Django,Paginator,分页器
目录
  • 分页后添加删除功能

  • 实现模态框编辑内容

  • 完整代码笔记

    • 利用layui框架实现分页:

    • layui实现完整表格分页:

    • 自己实现分页:


# 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

来源:https://www.cnblogs.com/LyShark/p/12103224.html

0
投稿

猜你喜欢

手机版 网络编程 asp之家 www.aspxhome.com