下面实现分页功能，还是按照固定步骤来。
我先随机插入100条数据。然后分页，每页显示10条数据。
分页类：在前面"08 django管理系统 - 部门管理 - 部门分页"讲到过，代码如下：
from django.utils.safestring import mark_safeclass Pagination(object):def __init__(self, request, queryset, page_size=10, page_param="page", plus=5):""":param request: 请求的对象:param queryset: 符合条件的数据（根据这个数据给他进行分页处理）:param page_size: 每页显示多少条数据:param page_param: 在URL中传递的获取分页的参数，例如：/etty/list/?page=12:param plus: 显示当前页的 前或后几页（页码）"""from django.http.request import QueryDictimport copyquery_dict = copy.deepcopy(request.GET)query_dict._mutable = Trueself.query_dict = query_dictself.page_param = page_parampage = request.GET.get(page_param, "1")if page.isdecimal():page = int(page)else:page = 1self.page = pageself.page_size = page_sizeself.start = (page - 1) * page_sizeself.end = page * page_sizeself.page_queryset = queryset[self.start:self.end]total_count = queryset.count()total_page_count, div = divmod(total_count, page_size)if div:total_page_count += 1self.total_page_count = total_page_countself.plus = plusdef html(self):# 计算出，显示当前页的前5页、后5页if self.total_page_count <= 2 * self.plus + 1:# 数据库中的数据比较少，都没有达到11页。start_page = 1end_page = self.total_page_countelse:# 数据库中的数据比较多 > 11页。# 当前页<5时（小极值）if self.page <= self.plus:start_page = 1end_page = 2 * self.plus + 1else:# 当前页 > 5# 当前页+5 > 总页面if (self.page + self.plus) > self.total_page_count:start_page = self.total_page_count - 2 * self.plusend_page = self.total_page_countelse:start_page = self.page - self.plusend_page = self.page + self.plus# 页码page_str_list = []self.query_dict.setlist(self.page_param, [1])page_str_list.append('<li><a href="?{}">首页</a></li>'.format(self.query_dict.urlencode()))# 上一页if self.page > 1:self.query_dict.setlist(self.page_param, [self.page - 1])prev = '<li><a href="?{}">上一页</a></li>'.format(self.query_dict.urlencode())else:self.query_dict.setlist(self.page_param, [1])prev = '<li><a href="?{}">上一页</a></li>'.format(self.query_dict.urlencode())page_str_list.append(prev)# 页面for i in range(start_page, end_page + 1):self.query_dict.setlist(self.page_param, [i])if i == self.page:ele = '<li class="active"><a href="?{}">{}</a></li>'.format(self.query_dict.urlencode(), i)else:ele = '<li><a href="?{}">{}</a></li>'.format(self.query_dict.urlencode(), i)page_str_list.append(ele)# 下一页if self.page < self.total_page_count:self.query_dict.setlist(self.page_param, [self.page + 1])prev = '<li><a href="?{}">下一页</a></li>'.format(self.query_dict.urlencode())else:self.query_dict.setlist(self.page_param, [self.total_page_count])prev = '<li><a href="?{}">下一页</a></li>'.format(self.query_dict.urlencode())page_str_list.append(prev)# 尾页self.query_dict.setlist(self.page_param, [self.total_page_count])page_str_list.append('<li><a href="?{}">尾页</a></li>'.format(self.query_dict.urlencode()))search_string = """<li><form style="float: left;margin-left: -1px" method="get"><input name="page"style="position: relative;float:left;display: inline-block;width: 80px;border-radius: 0;"type="text" class="form-control" placeholder="页码"><button style="border-radius: 0" class="btn btn-default" type="submit">跳转</button></form></li>"""page_str_list.append(search_string)page_string = mark_safe("".join(page_str_list))return page_string我们去admin_list函数中去修改业务逻辑，并导入utils里的分页类
from app01.utils.pagination import Pagination
def admin_list(request):# return HttpResponse("admin_list is ok")# 查询所有的数据queryset = models.Admin.objects.using("default").all()# 创建分页对象page_obj = Pagination(request, queryset)form = AdminModelForm()# context = {# "queryset": queryset,# "form": form# }context = {"form": form,"queryset": page_obj.page_queryset, # 分完页的数据"page_html": page_obj.html(), # 分页后的页码}return render(request, 'admin_list.html', context)然后编辑admin_list.html中的table部分
<!-- 加上分页 -->
<div class="row"><ul class="pagination">{{ page_html }}</ul>
</div>完整代码如下：
{% extends 'base.html' %}{% block content %}<div class="container-fluid"><div style="margin-bottom: 10px" class="clearfix"><div class="panel panel-default"><div class="panel-heading"><div style="margin-bottom: 18px"><input type="button" class="btn btn-primary" value="新建管理员" data-toggle="modal"data-target="#myModal" id="btn_add"></div><div><!-- 新建订单弹框 --><div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"><div class="modal-dialog" role="document"><div class="modal-content"><div class="modal-header"><button type="button" class="close" data-dismiss="modal"aria-label="Close"><spanaria-hidden="true">×</span></button><h4 class="modal-title" id="myModalLabel">新建管理员</h4></div><div class="modal-body"><form id="formAdd"><div class="clearfix">{% for field in form %}<div class="col-xs-12"><div class="form-group"style="position: relative;margin-bottom: 20px;"><label>{{ field.label }}</label>{{ field }}<span class="error-msg"style="color: red;position: absolute;"></span></div></div>{% endfor %}</div></form></div><div class="modal-footer"><button type="button" class="btn btn-default" data-dismiss="modal">取消</button><button type="button" class="btn btn-primary" id="btn_save">保存</button></div></div></div></div></div></div><div class="panel-body"><div style="float: left"><p>管理员列表</p></div><!-- Table --><table class="table"><thead><tr><th>ID</th><th>name</th><th>password</th><th>sex</th><th>操作</th></tr></thead><tbody>{% for obj in queryset %}<tr><td>{{ obj.id }}</td><td>{{ obj.name }}</td><td>{{ obj.password }}</td><td>{{ obj.get_sex_display }}</td><td><a class="btn btn-success" href="#" role="button">编辑管理员</a><a class="btn btn-danger" href="#" role="button">删除管理员</a></td></tr>{% endfor %}</tbody></table>{% if error %}<div style="color: red;">{{ error }}</div>{% endif %}</div></div></div><!-- 加上分页 --><div class="row"><ul class="pagination">{{ page_html }}</ul></div></div>
{% endblock %}{% block js %}<script>// 绑定btn_add的点击事件$(function () {// 新增按钮的点击事件bingBtnAddEvent();// 保存按钮的点击事件bindBtnSaveEvent();})function bingBtnAddEvent() {$("#btn_add").click(function () {// 点击新建管理员，弹出模态框console.log("click btn_add");})}function bindBtnSaveEvent() {// 点击之前，清除错误信息$(".error-msg").empty()$("#btn_save").click(function () {{#alert("btn_save clicked！ 我被点击拉")#}// 下面是ajax提交表单数据，提交到后台// 首先是批量获取表单数据let formData = $("#formAdd").serialize();console.log(formData);// 发送ajax请求$.ajax({url: "/admin/add/",type: "post",data: formData,dataType: "json",success: function (data) {console.log(data, "我从admin_add函数成功返回");if (data.status === "True") {alert("添加成功！")window.location.reload();} else {alert("添加失败！")// 在弹出框中显示错误信息console.log(data.error);// 把错误信息显示在模态框中$.each(data.error, function (name, error_list) { // name就是字段名，error_list就是错误信息列表// 根据字段名字，找到对应的input标签，然后显示错误信息$("#id_" + name).next().text(error_list[0]);})}}})})}</script>
{% endblock %}效果如下：
