Django 练习班级管理系统三 -- 分页
程序员文章站
2023-08-12 11:56:27
在 user_manager 项目下创建一个 python package:utils,里面创建一个 page.py 文件 page.py 文件内容为: 修改 views.py 文件 classes.html 内容为: ......
在 user_manager 项目下创建一个 python package:utils,里面创建一个 page.py 文件
page.py 文件内容为:
# 创建一个 pagerhelper 类 class pagerhelper: # 创建对象需要至少传入3个参数 def __init__(self, total_count, current_page, base_url, per_page=10): self.total_count = total_count self.current_page = current_page self.base_url = base_url self.per_page = per_page # 计算切片起始页数 @property def db_start(self): return (self.current_page - 1) * self.per_page # 计算切片最后页数 @property def db_end(self): return self.current_page * self.per_page # 计算总共有多少页 def total_page(self): v, a = divmod(self.total_count, self.per_page) if a != 0: v += 1 return v # 返回构造后的页码 html 页面代码 def pager_str(self): # 获取总共页数 v = self.total_page() # 存放 html 代码 pager_list = [] # 判断 上一页 是否到顶部 if self.current_page == 1: pager_list.append('<a href="java:script(0)">上一页</a>') else: pager_list.append('<a href="%s?p=%s">上一页</a>' % (self.base_url, self.current_page - 1,)) # 这里为了美观,页面只显示 11 个 # 如果总页数少于11,则定义起始切片和末尾切片数为固定 if v <= 11: pager_range_start = 1 pager_range_end = v + 1 # 总页数大于11的情况 else: # 当前页数小于 6 if self.current_page < 6: pager_range_start = 1 pager_range_end = 11 + 1 else: pager_range_start = self.current_page - 5 pager_range_end = self.current_page + 5 + 1 # 当前页数大于总页数,对起始切片和末尾切片数重新赋值 if pager_range_end > v: pager_range_start = v - 10 pager_range_end = v + 1 for i in range(pager_range_start, pager_range_end): # 给当前页码添加 class if i == self.current_page: pager_list.append('<a class="active" href="%s?p=%s">%s</a>' % (self.base_url, i, i)) else: pager_list.append('<a href="%s?p=%s">%s</a>' % (self.base_url, i, i)) # 判断 下一页 是否到底部 if self.current_page == v: pager_list.append('<a href="java:script(0)">下一页</a>') else: pager_list.append('<a href="%s?p=%s">下一页</a>' % (self.base_url, self.current_page + 1,)) # 字典转化为字符串 pager = "".join(pager_list) return pager
修改 views.py 文件
@auth def handle_classes(request): if request.method == "get": current_user = request.session.get('username') # 获取所有的班级列表 # for l in range(1, 102): # models.classes.objects.create(caption='全栈一班%i' %(l)) current_page = request.get.get('p', 1) current_page = int(current_page) # 所有数据的个数 total_count = models.classes.objects.all().count() # 导入 pagerhelper 类 from utils.page import pagerhelper # 传入初始化参数:总记录,当前页码,url,每页显示几条数据 obj = pagerhelper(total_count, current_page, '/classes.html', 5) # 获得构建页码的 html 代码 pager = obj.pager_str() # 获取数据库中指定的 记录 cls_list = models.classes.objects.all()[obj.db_start:obj.db_end] return render(request, 'classes.html', {'username': current_user, 'cls_list': cls_list, 'str_pager': pager}) elif request.method == "post": # form 表单提交的处理方式 """ caption = request.post.get('caption', none) models.classes.objects.create(caption=caption) return redirect('/classes.html') """ # ajax 提交的方式处理 import json response_dict = {'status': true, 'error': none, 'data': none} caption = request.post.get('caption', none) if caption: obj = models.classes.objects.create(caption=caption) # print(obj.id) # print(obj.caption) response_dict['data'] = {'id': obj.id, 'caption': obj.caption} else: response_dict['status'] = false response_dict['error'] = "标题不能为空" return httpresponse(json.dumps(response_dict))
classes.html 内容为:
{% extends "layout.html" %} {% block css %} {% endblock %} {% block content %} <h1>班级管理</h1> <div> <input id="id_add" type="button" value="添加"> <a href="/add_classes.html">添加</a> </div> <table border="1"> <thead> <tr> <th>id</th> <th>标题</th> </tr> </thead> <tbody> {% for item in cls_list %} <tr> <td>{{ item.id }}</td> <td>{{ item.caption }}</td> <td> <a>编辑</a>|<a class="td-delete">删除</a> </td> </tr> {% endfor %} </tbody> </table> <div class="pagination"> {{ str_pager|safe }} </div> <div class="modal hide"> <form method="post" action="/classes.html"> {% csrf_token %} <input name="caption" type="text" placeholder="标题"> <input id="id_modal_cancel" type="button" value="取消"> <input type="submit" value="确定"> <input type="button" id="modal_ajax_submit" value="ajax确定"> </form> </div> <div class="shade hide"></div> <div class="remove hide"> <input id="id_remove_cancel" type="button" value="取消"> <input type="button" value="确定"> </div> {% endblock %} {% block js %} <script> $(function () { $('#menu_class').addclass('active'); bindaddevent(); bindcancelevent(); bindtddeleteevent(); bindsubmitmodal(); }) function bindaddevent() { $('#id_add').click(function () { $('.modal, .shade').removeclass('hide') }) } function bindcancelevent() { $('#id_modal_cancel').click(function () { $('.modal, .shade').addclass('hide') }) } function bindtddeleteevent() { /* 新建的 td 没有绑定 click 事件 $('td .td-delete').click(function () { $('.remove, .shade').removeclass('hide') }) */ // 使用 js 的事件绑定委托 $('tbody').on('click', '.td-delete', function () { $('.remove, .shade').removeclass('hide') }) } function bindsubmitmodal() { $('#modal_ajax_submit').click(function () { var value = $('.modal input[name="caption"]').val(); $.ajax({ url: "/classes.html", type: 'post', data: {caption: value}, datatype: "json", success: function (rep) { if(!rep.status){ alert(rep.error) }else{ // 通过刷新整个界面来显示新数据 //location.reload(); // 通过js 在 table 表格最后追加一行数据,追加的数据就是当前增加的数据 var tr = document.createelement('tr'); var td1 = document.createelement('td'); td1.innerhtml = rep.data.id; var td2 = document.createelement('td'); td2.innerhtml = rep.data.caption; var td3 = document.createelement('td'); td3.innertext = "|"; var a1 = document.createelement('a'); a1.innerhtml = "编辑"; var a2 = document.createelement('a'); a2.classname = "td-delete"; a2.innerhtml = "删除"; $(td3).prepend(a1); $(td3).append(a2); $(tr).append(td1); $(tr).append(td2); $(tr).append(td3); $('table tbody').append(tr); $('.modal, .shade').addclass('hide'); } } }) }) } </script> {% endblock %}
上一篇: 没人能踩响
下一篇: 大专生自学web前端到找到工作的经验